React Re-render Issue While Mapping buttons-CodePudding

I am trying to make 4 cards with buttons and when ı click a button ı wanna change the background colour of the button. But at the first click, it is working after that it's not rendering buttons. How can I handle it?

CodePudding user response：

On the line 9 you are mutating state, you should update state only with setter function

CodePudding user response：

In your code on line 9 your are mutating the state like this >

state[index]={active: demo}

Instead of this use setState function to update state. Using setState will re- render your state. you can do something like this

let arr = {}
arr = {active: demo}
setState(arr)

CodePudding user response：

There are two issues present in your code

First: On line number 9 you are mutating state, you should update state using setstate function.

setstate(prevState => {
    const newState = [...prevState];
    newState[index] = { active: deneme };
    return newState;
})

Second: On line number 21 you have to include the special attribute "key" on "Collapsible" component.

<Collapsible key={item.toString()} trigger-"Start here" contentContainerTagName="div">

react list keys