Создание массива в чаилд компоненте

Правильно, с точки зрения реакта это сделать следующим образом: массив хранить как состояние в родительском объекте, в родительском же объекте сделать функцию, которая модифицирует состояние, первому чайлду в качестве параметра передавать функцию, а второму значение массива.

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')
        );