Create a list of elements with numbers and I rendered it using a Array.map() and set state for each node. After rendering I want to update the the state of the node individually

1

Create a list of elements with numbers and I rendered it using a Array.map() and set state for each node. After rendering I want to update the the state of the node individually

parent component:

array.map((e,i) = <Node key={i} />)

Node Components

function Node(props) {
const [prior, setPrior] = useState(0);
return (<div>{prior}</div>)
}
2

I would like to see your code.

3

i have shown the code above

4

You want to use setPrior to change the state, but the question is how can you change the state of the specific child which is rendered by array.map() and you need to make change to only specific child.
Absolutely we can do it by passing a function in the props of the component and access that function inside our Node component which will that use setPrior to change the value of the {prior}.

However that is really bad way to do it. Far from the best way or convenient way.
I only did it because it sounds intresting. :smile:
But I do not know more about what you are trying to accomplish at last. If you would like to elaborate on your final goal result, what you are trying to make, that will be really great.

Also I think you should just do this.

function Node() {
const [prior, setPrior] = useState([1,2,3,4,5]);

#here you can make some function which will chang specific component of the array by using setPrior and everything will get updated.
#explain me by which event you want to change any individual value and i will explain in details on how to do it. 

return (
    {prior.map( ( x, i ) => <div key = { i } >{ i }</div>}

#this will reurn 
1
2
3
4
5


) 


}
5