title: Search Table in ReactJs
body: <p>I have made one table and am filtering it, but when I clear the search query, the table data doesn't show up, and table gets stuck on the query result.
  <code>SearchBox</code> is the textbox, <code>TableData</code> is the table, and in <code>Container</code> I am changing the <code>SearchBox</code> and <code>TableData</code> states.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var SearchBox = React.createClass({
    doSearch: function() {
      var query = this.refs.searchInput.getDOMNode().value;
      console.log(query)
      this.props.doSearch(query);
    },
    render: function() {
      return (
        &lt;input
          type="text"
          ref="searchInput"
          placeholder="Search Name"
          value={this.props.query}
          onChange={this.doSearch}
        /&gt;
      )
    }
  })
  
  var TableData = React.createClass({
    render: function() {
      var rows=[];
      this.props.data.forEach(function(data) {
        rows.push(&lt;tr&gt;&lt;td&gt;{data.name}&lt;/td&gt;&lt;td&gt;{data.roll}&lt;/td&gt;&lt;/tr&gt;)
      });
      return (
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Author&lt;/th&gt;
              &lt;th&gt;Text&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{rows}&lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  });
  
  var Container = React.createClass({
    componentDidMount: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    doSearch: function(queryText) {
      //get query result
      var queryResult=[];
      this.state.data.forEach(function(person) {
        console.log("person ",person);
        if (person.name.indexOf(queryText) != -1)
          queryResult.push(person);
        console.log("query result ",queryResult);
      });
      debugger;
      this.setState({
        data: queryResult,
        query:queryText
  
      })
    },
    getInitialState: function() {
      return {
        data:[],
        query:''
      };
    },
    render: function() {
      return(
        &lt;div&gt;
          &lt;div className="row"&gt;
            &lt;SearchBox query = {this.state.query} doSearch={this.doSearch} /&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;TableData data = {this.state.data} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(
    &lt;Container url="data2.json"/&gt;,
    document.getElementById('searchApplications')
  );
  </code></pre>