title: Call child component method from parent in react
body: <p>I have simple component called <strong>List</strong> which is a simple <strong>ul</strong> with some <strong>li</strong> inside. Each <strong>li</strong> is a simple component.
  I have other parent component which render one input field and the <strong>List</strong> component. Tapping on <strong>Send</strong> key I catch text of input field. I want to call for example a function called <strong>handleNewText(inputText)</strong> but this function need to stay inside List component because the state I use to populate other <strong>li</strong> components live in <strong>List</strong> component.</p>
  
  <p>I don' t want to refactor <code>List</code> and <code>MyParent</code> component passing the manage of data from <code>List</code> to <code>MyParent</code>.</p>
  
  <p>first is parent and second is child</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class TodoComp extends React.Component {
    constructor(props){
      super(props);
      this.handleKeyPress = this.handleKeyPress.bind(this);
    }
  
    componentDidMpunt(){
      console.log(this._child.someMethod());
    }
  
  
    handleKeyPress(event){
      if(event.key === 'Enter'){
        var t = event.target.value;
  
      }
    }
  
    render(){
      return (
          &lt;div&gt;
            &lt;input
              className="inputTodo"
              type="text"
              placeholder="want to be an hero...!"
              onKeyPress={this.handleKeyPress}
            /&gt;
            &lt;List/&gt;
          &lt;/div&gt;
      );
    }
  
  }
  
  
  export default class List extends React.Component {
    constructor() {
      super();
      this.flipDone = this.flipDone.bind(this);
      this.state = {
        todos: Array(3).fill({ content: '', done: false})
      };
    }
  
    flipDone(id) {
      let index = Number(id);
  
      this.setState({
        todos: [
          ...this.state.todos.slice(0, index),
          Object.assign({}, this.state.todos[index], {done: !this.state.todos[index].done}),
          ...this.state.todos.slice(index + 1)
        ]
      });
    }
  
    render() {
  
      const myList = this.state.todos.map((todo, index) =&gt; {
        return (
          &lt;Todo key={index}
                clickHandler={this.flipDone}
                id={index}
                todo={todo}
                handleText={this.handleText}
          /&gt;
        );
      })
  
      return (
        &lt;ul className="list"&gt;
          {myList}
        &lt;/ul&gt;
      );
    }
  
  
  ReactDOM.render(&lt;TodoComp /&gt;,document.getElementById('myList'));</code></pre>
  </div>
  </div>
  </p>