Как передать значение от родительского компонента к дочернему компоненту (react)

Я новичок в изучении React и пытаюсь передать значение, которое я получаю от пользовательского ввода внутри моего ParentComponent (через поле ввода) в его ChildComponent - которое я буду использовать для запуска вызова AJAX.

Я думал, что путем замены состояния в ParentComponent будет работать-но я все еще не в состоянии схватить его в ChildComponent.

Я также хочу, чтобы ChildComponent запускался/визуализировался только после получения входного значения от ParentComponent (чтобы я мог выполнить вызов AJAX, а затем оказывать...).

Какие-нибудь советы?

var ParentComponent = React.createClass({

     getInitialState: function() {

         return {data: []};

     },



    handleSearch: function(event) {

        event.preventDefault();

        var userInput = $('#userInput').val();

        this.replaceState({data: userInput});

    },



    render: function() {

        return (

            <div>

                <form>

                    <input type="text" id="userInput"></input>

                    <button onClick={this.handleSearch}>Search</button>

                </form>

                <ChildComponent />

                {this.props.children}

            </div>

          );

        }

    });



var ChildComponent = React.createClass({

   render: function() {

        return <div> User's Input: {this.state.data} </div>

       }

   });