Creating an array in the tea component

That's right, from the point of view of the reactor, to do this as follows: store the array as a state in the parent object, in the parent object, make a function that modifies the state, pass the function to the first child, and the second value of the array as a parameter.

Codepen

 <div id="root">You have no JS enabled</div> 

 class FirstChild extends React.Component{ render(){ var {needArr} = this.props; var outList = needArr.map( (comp,key) => { return <li key={key}> {comp} </li> }); return (<ul> {outList} </ul>) } } class SecondChild extends React.Component { render (){ return [(<button onClick={() => {this.props.actions.buttonClick("aaa")}}>add me</button>), (<button onClick={() => this.props.actions.actionDva()}>RemoveFirst</button>), (<button onClick={() => this.props.actions.actionTri()}>RemoveLast</button>), (<button onClick={() => this.props.actions.actionFour("bbb")}>AddFirst</button>) ]; }; } class MainComp extends React.Component{ constructor(props){ super(props); this.state = { myArr:["A", "B", "C", "D"] } } modifyArray = (newComp) => { var {myArr} = this.state; myArr.push(newComp); this.setState({myArr}); } removeFirst = () => { var {myArr} = this.state; myArr.shift(); this.setState({myArr}); } removeLast = () => { var {myArr} = this.state; myArr.pop(); this.setState({myArr}); } addFirst = (val) => { var {myArr} = this.state; myArr.unshift(val); this.setState({myArr}); } render(){ var {myArr} = this.state; return (<div> <FirstChild needArr={myArr}/> <SecondChild actions={{ buttonClick:this.modifyArray, actionDva:this.removeFirst, actionTri:this.removeLast, actionFour:this.addFirst }}/> </div>) } } ReactDOM.render( <MainComp/>, document.getElementById('root') );