Toggle through Reactjs Mapped Array

Question

I'm trying to figure out how to only show one item in my array at a time and then click back and fourth through them using to buttons. Currently right now if there are 4 items in the array all 4 are shown on the page. But I'd like to show them one at a time and then be back to click back and fourth through them. I've built this using hooks.

Here is my current code:

<div>
 {[...Array(stepBlock)].map((e, i) => 
   <div className={'stepBlock'} key={i}>
        <div>{details[i].name}</div>
   </div>
 )}
 </div>
 <div>
    <div>previous</div>
    <div>next</div> 
  </div>

Any help would be greatly appreciated.

Arun Kumar Mohan · Accepted Answer · 2021-04-08 01:39:08Z

2

You can create an index state variable to track the active index state. Since you want to render all the array items but hide the inactive ones, you can conditionally add a hidden CSS class based on the active index. The 'Previous' and 'Next' buttons can update the state by calling setIndex (the state updater function). You should pass a function to setIndex since the new state depends on the previous state. And you can disable the buttons if the index is out of bounds.

const [index, setIndex] = useState(0)
const names = ['John', 'Paul', 'George', 'Ringo']

<>
  {names.map((name, i) => (
    <div key={i} className={`name ${i !== index ? 'hidden' : ''}`}>
      {name}
    </div>
  ))}
  <div>
    <button
      disabled={index === 0}
      onClick={() => setIndex((prevIndex) => prevIndex - 1)}
      className="button"
    >
      Previous
    </button>{' '}
    <button
      disabled={index === names.length - 1}
      onClick={() => setIndex((prevIndex) => prevIndex + 1)}
      className="button next-button"
    >
      Next
    </button>
  </div>
</>

edited Apr 8, 2021 at 1:39

answered Apr 8, 2021 at 1:08

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Robert Over a year ago

the details part was just to display this is where the info would go.. I'm trying to actually toggle the div named stepBlock has that is where I have the key "i" already assigned too. While your example does work it confuses me due to that.

Arun Kumar Mohan Over a year ago

@Robert Can you add the code involving stepBlock to the question?

Robert Over a year ago

It is already there from my original post. I'm mapping the array to it. and it creates right now 4 blocks. StepBlock is simply === 4. i named the div class StepBlock and so the result is 4 white blocks on the page. Instead of showing all 4. I'm simply trying to show one at a time then toggle through on my next and previous button..

Arun Kumar Mohan Over a year ago

@Robert Why do you need to map over the whole array if you only want to display one item at a time? You only need to keep track of the active index in the array. Let me know if I'm missing something.

Robert Over a year ago

Because I'm going to be modifying elements within each part of the array via a drag and drop.

|

Collectives™ on Stack Overflow

Toggle through Reactjs Mapped Array

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related