How to pass data from a Child component to Parent Component in ReactJs
<p>I have select drop-down which looks like this</p>

<pre><code>//The select Part of the Module
 var SelectOption = React.createClass({

      getInitialState: function() {
              return {data: [],empid:null};
      },

      loadOptionfromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data});
            //console.log(data);
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },

      componentDidMount: function() {
            this.loadOptionfromServer();
            //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
      },

      onChange: function (e) {
          var employeeId = e.target.value;
          if(employeeId == 1){
                this.setState({
                  empid:'xxx'
                });
            }
            else{
                this.setState({

                  empid: employeeId
                })
            } 
                this.renderTable() ;
        },

      renderTable:function(){

        &lt;Tablefortask  url="/appraisal/alltask" empid={ this.state.empid } pollInterval={70000}  /&gt;

      },

      render: function() {
        return (
            &lt;SelectOptionList onChange={this.onChange} data={this.state.data} /&gt;
                 {  this.renderTable() ; }
        );

      }
    });

     var SelectOptionList = React.createClass({

         getInitialState: function() {
          return {empid: ''};
        },


        render: function() {
          var commentNodes = this.props.data.map(function(list) {
            return (

              &lt;Addcontenttoselect id={list.emp_ide_id} option={list.emp_name} &gt;
              &lt;/Addcontenttoselect&gt;
            );
          });
          return (
              &lt;select 
                    id="select1" 
                    className="form-control" 
                    data-placeholder="Basic Select2 Box"
                    onChange={this.props.onChange}
                  &gt;&lt;option value="1" &gt;Select Employee &lt;/option&gt;
                  {commentNodes}&lt;/select&gt;
          );
        }
      });

      var Addcontenttoselect = React.createClass({
          render: function() {
            return (
                    &lt;option value={ this.props.id } &gt;{this.props.option}&lt;/option&gt;
            );
          }
        });
</code></pre>

<p>And I have a Table Component which is a Child to Drop down Hypothetically  is like this </p>

<pre><code> //The Table part
 var Tablefortask = React.createClass({

        getInitialState: function() {
                  return {data: []};
          },

         handleCommentSubmit: function(comment) {
              console.log(comment);
          },

          loadCommentsFromServer: function() {
            $.ajax({
              url: this.props.url+'/'+this.props.empid,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },

          componentDidMount: function() {
                this.loadCommentsFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
          },


          render: function() {
            return (
             &lt;div className="border-basic-task col-md-12"&gt;
             &lt;div className="col-md-12"&gt;

              &lt;table className="table table-bordered table-striped-col " id="table-data"&gt;
              &lt;thead&gt;
                &lt;tr align="center"&gt;
                    &lt;th&gt;Task  Name&lt;/th&gt;
                    &lt;th &gt;Standard Discription of Task&lt;/th&gt;
                    &lt;th&gt;Employee Comment&lt;/th&gt;
                    &lt;th &gt;Employee Rating&lt;/th&gt;
                    &lt;th width="30%"&gt;Reviewer Comment&lt;/th&gt;
                    &lt;th &gt;Reviewer Rating&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;TablefortaskList data={this.state.data} /&gt;
              &lt;/table&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            );
          }
        });

    var Addcontenttotable = React.createClass({
          render: function() {
          if(this.props.reviewComment=== "" &amp;&amp; this.props.reviewRating === '' ){
            return (
                 &lt;tr&gt;&lt;td&gt;{this.props.taskName}&lt;/td&gt;
                  &lt;td&gt;{this.props.standarDescription}&lt;/td&gt;
                  &lt;td&gt;{this.props.emplComment}&lt;/td&gt;
                  &lt;td width="5%"&gt;{this.props.empRating}&lt;/td&gt;
                  &lt;td &gt;&lt;textarea 
                            className="form-control" 
                            name="empComment"
                            placeholder="Employee Comment"


                            /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;select&gt;
                              &lt;option value=""&gt;Option&lt;/option&gt;
                              &lt;option value="1"&gt;1&lt;/option&gt;
                              &lt;option value="2"&gt;2&lt;/option&gt;
                              &lt;option value="3"&gt;3&lt;/option&gt;
                              &lt;option value="4"&gt;4&lt;/option&gt;
                              &lt;option value="5"&gt;5&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;

            );
            }
            else {
             return (
              &lt;tr&gt;&lt;td&gt;{this.props.taskName}&lt;/td&gt;
                  &lt;td&gt;{this.props.standarDescription}&lt;/td&gt;
                  &lt;td&gt;{this.props.emplComment}&lt;/td&gt;
                  &lt;td&gt;{this.props.empRating}&lt;/td&gt;
                  &lt;td&gt;{this.props.reviewComment}&lt;/td&gt;
                  &lt;td&gt;{this.props.reviewRating}&lt;/td&gt;
              &lt;/tr&gt;
              );
            }
          }
        });

      var TablefortaskList = React.createClass({
        render: function() {
          var commentNodes = this.props.data.map(function(comment) {
            return (
              &lt;Addcontenttotable taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} &gt;
              &lt;/Addcontenttotable&gt;
            );
          });
          return (
              &lt;tbody&gt;{commentNodes}&lt;/tbody&gt;
          );
        }
      });
</code></pre>

<p>When ever there is a change in the dropdown I am taking the value of the select element and passing it to the <code>Table</code> component which calls another API and loads the details of the user with that particular ID .</p>

<p>I have tested these two components separately it works but when I connect it together its not working</p>

<p>Any help would be great </p>

<p><strong>Update</strong></p>

<p>added this line in the <code>render</code> method of <code>SelectionOption</code> component</p>

<pre><code>this.renderTable() ;
</code></pre>

<p>thanks </p>