Toggle through Reactjs Mapped Array

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.



Read more here: https://stackoverflow.com/questions/66995928/toggle-through-reactjs-mapped-array

Content Attribution

This content was originally published by Robert at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: