为数组反应 JS setState

Question

I have a data and each data has a state, I put it on React Hooks array state. This is my current state that I had after requesting data from server

console.log("panduan : ", panduan)

// Output
panduan :
[6] -> [false, false, false, false, false, false]

So each of these boolean are supposed to be a trigger button for this component below.

I have a component and each data should set their own state, this is my component.

data.map((post, index) => {
  <TriggerButton onClick={() => setPanduan([!panduan[index]])}>
    {post.year}
  </TriggerButton>
})

// this Child component should be shown when state is true
const content = (
  <Triggered show={panduan[index]}>
    {post.someData}
  </Triggered>
)

this code above is still not working, maybe because I didn't use the setPanduan on the right way. So how to setPanduan for each data?

Answer 1

I think you may be looking for something more like this in your Parent onClick method

onClick={() => { 
  const tempArray = [...panduan];
  tempArray[index] = !tempArray[index];
  setPanduan(tempArray);
}

as what you currently have would end up changing the entire state to a single item array and remove the data that was initialised there from the server :)

Answer 2

You are not setting the updated array right. Make sure to destructure/clone the old array and toggle only the intended index like so:

data.map((post, index) => {
   <TriggerButton onClick={() => {
      // clone old state
      const newArray = [...panduan];
      // update toggled index
      newArray[index] = !newArray[index]
      setPanduan(newArray)
    }>
      {post.year}
   </TriggerButton>
})