如何更改反应中 3 个组件中的 1 个的 state

Question

I have the following layout.

<ParentComponent>
  |ComponentA
  |ComponentA
  |ComponentA

Basically I call the same Component 3 times in the parent component because they are very similar but just have different values. I was told I need to put a button on the parent component to change the values of just one out of the 3 ComponentA. ComponentA is called 3 times to give me the same thing 3 times, if I make a button to set the state of one, it will go to all 3. How can I single out one component?

Thanks!

Answer 1

Make an array of props you want to send to your components, and then change the content of that array on some button/input events, as your application demands it.

For example:

const arrOfProps = [{someProp:'aaa'}, null, null]

const someFunc = (num)=>{
    arrOfProps.forEach((x, index)=>{
        if (index === num) {x = {someProp:'aaa'}}
        else { x = null}
    })
}

render(){
    return(
    <div>
        <button onClick={()=>someFunc(0)}>One</button>
        <button onClick={()=>someFunc(1)}>Two</button>
        <button onClick={()=>someFunc(2)}>Three</button>
        <ParentComponent>
            <div>{arrOfComponents.map((comp, index)=>{
                return <ComponentA key={index} prop={comp}/>
            })}</div>
        </ParentComponent>
    </div>)
}