ReactJs stateWrapper for nested state objects
In general, React disapproves playing with tis internal lifecycle function such has render or setState has it may cause unexpected behavior later on in your app.

Everything that you put in a Component's state is only readable by this component, and nothing else. As the docs will also tell you, the state may only be modified by the setState function, as it will avoid unexpected behaviors in the re-rendering process.

If some components need to modify what each others are going to render, then the values determining the ouput of their render function should be stored in their first common parent component.

A working live implementation :



class Test extends React.Component {
 constructor(props) {
  super(props)
  this.state = {}
 }

 setText = (source, dest) =&gt; event =&gt; {
  this.setState({ 
   [dest]: `Received text: Component n°${source + 1} set my text`,
   [source]: 'I got clicked!'
   })
 }

 render() {
  return (
   &lt;div&gt;
    {[1, 2, 0].map((dest, index) =&gt; &lt;WrappedComponent onClick={this.setText(index, dest)} text={this.state[index]}/&gt;)}
   &lt;/div&gt;
  );
 }

}

class WrappedComponent extends React.Component { //I left this component stateful for future modifications

 render() {
  const { text, onClick } = this.props
  return (
   &lt;div onClick={onClick}&gt;{text || 'No one defined my text (yet)'}&lt;/div&gt;
  )
 }
}

ReactDOM.render(&lt;Test/&gt;, document.getElementById('root'))
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
&lt;div id='root'/&gt;




Here every component's text is stored in their parent component dynamically.