How to update an array in React using Hooks. Not adding new elements just looping through a list

Question

I'm trying to use React Hooks to update the state of an array.

Basically I have a list:

const hatList = ['🎩', '👒', '🎓', '🧢', '⛑', '🪖' ]

I want to loop through that list every time I do an onClick:

<Button
  className="btn"
  btnText="Show Me Missing Koroks!"
  onClick={() => setHat(hatList[0 + 1])} // I know this gives me just the 2nd obj of the list, but how to loop through that list on every onClick ?
/>

This is the whole component:

const IndexPage = () => {

  const [hat, setHat] = React.useState([])
  
  const hatList = ['🎩', '👒', '🎓', '🧢', '⛑', '🪖' ]

  return (
    <main>
      <header>
        <h1>For the Love of BOTW</h1>
        <h2>You thought you have found all the Koroks ?</h2>
      </header>
      <section>
        <Button
          className="btn"
          btnText="Show Me Missing Koroks!"
          onClick={() => setHat(hatList[0 + 1])}
        />
        <>
          <span role="img" aria-label='hat emoji various'>{hat}</span>
          <Icon name="korok" />
          <Icon name="mount" />
        </>
      </section>
    </main>
  )
}

export default IndexPage

How can I do this?

codesandbox.io/s/restless-sea-8krwr?file=/src/App.js

Dupocas
– Dupocas

2020-12-31 15:12:41 +00:00
Commented Dec 31, 2020 at 15:12 — Dupocas
– Dupocas, Commented Dec 31, 2020 at 15:12

Sonia Aguilar · Accepted Answer · 2020-12-31 15:41:26Z

1

You have to use a state for the currentIndex.

const [currentIndex, setCurrentIndex] = useState(0)

// in onClickButton, increase this index
<Button
          className="btn"
          btnText="Show Me Missing Koroks!"
          onClick={() => setCurrentIndex((index) => index < hatList.length-1 ?  index+1 : 0)}
        />
        <>

To show current hat:

<>
          <span role="img" aria-label='hat emoji various'>{hatList[currentIndex] }</span>
          <Icon name="korok" />
          <Icon name="mount" />
        </>

answered Dec 31, 2020 at 15:41

Sonia Aguilar

1715 bronze badges

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

1 Comment

intercoder Over a year ago

thanks @Sonia Aguilar this helped. Is working now.

Collectives™ on Stack Overflow

How to update an array in React using Hooks. Not adding new elements just looping through a list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related