Xtykutl

I have a parent component holding a state called nodes which is established as an array. I am trying to pass this.state.nodes to a child component and have that component have the array as part of the child component state, but it's not working. Here is the code:

 <ChildComponent nodes={this.state.graphNodes}/>

This is in the return statement. After some testing/console logging I know the prop is being passed.

In the child component, I have:

this.state = {

    nodes: this.props.nodes,

    links: ,

    totalNodes: ,

    totalLinks: 

}

But when I try to reference it or map it or do anything with it in the child component render or return it's telling me it's an empty array.

Since graphNodes is in a component state, i think its initial value should be an empty array, and you are initializing state with props.nodes at constructor, since constructor renders only once at initialization stage of the component at that moment graphNodes must be an empty array, after you change the parent component state, the state in the child component will not update. That makes graphNodes state always an empty array.

Why don't you use props directly, if you don't have to change the graphNodes values in the child component you can use it directly from props.

If you really want map props to state, you have to do it in componentDidUpdate lifecycle method with proper conditions

All of the comments were dead on. Using this.props.nodes directly instead of trying to put it in child state was the perfect solution. Thanks to all who replied!