I'm very new to React, in the process of learning it for a school project. I've tried searching for this answer thinking it'd be a fairly simple solution, but I'm having trouble finding a result that matches my scenario.

Essentially I'm looking to have an array of a specific component (e.g. Child), each holding a value in their state (e.g. { value: 2 } ). I'm looking to iterate through the array, accessing each component's state.value, and calculate a total from it.

My initial thought was to hold the array in the parent's state, and then iterate through the array doing something like this:

this.state.children.map(child => (
    child.state.value
))

However, the result is coming back as 'value' being undefined, leading me to believe I can't access another component's state this way.

I also looked into using refs, as described in the following article: https://www.geeksforgeeks.org/how-to-access-childs-state-in-react/

However, it seems as though that only lets me create a reference to a single child, meaning I would need a new reference for every child component in the array.

Any advice or sample code of what I could do (the more basic the better) would be greatly appreciated!