title: React Search filter function
body: <p>Basically what my code does is display a table list of names with a search bar at the top that filters the list as you type in a value.
  The problem I am having with my code at the moment is adding an if statement to the DisplayTable component. I dont want it to display all the stored data but just display the ones that have been inputted by the user in the search bar {queryText}</p>
  
  <p>Please Ignore the tableData variable </p>
  
  <pre><code>var InstantBox = React.createClass({
      doSearch:function(queryText){
          console.log(queryText)
          //get query result
          var queryResult=[];
          this.props.data.forEach(function(person){
              if(person.name.toLowerCase().indexOf(queryText)!=-1)
              queryResult.push(person);
          });
  
          this.setState({
              query:queryText,
              filteredData: queryResult
          })
      },
      getInitialState:function(){
          return{
              query:'',
              filteredData: this.props.data
          }
      },
      render:function(){
          return (
              &lt;div className="InstantBox"&gt;
                  &lt;h2&gt;Who is Richer?&lt;/h2&gt;
                  &lt;SearchBox query={this.state.query} doSearch={this.doSearch}/&gt;
                  &lt;DisplayTable data={this.state.filteredData}/&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var SearchBox = React.createClass({
      doSearch:function(){
          var query=this.refs.searchInput.getDOMNode().value; // this is the search text
          this.props.doSearch(query);
      },
      render:function(){
          return &lt;input className="searchbar-edit" type="text" ref="searchInput" placeholder="Search Name" value={this.props.query} onChange={this.doSearch}/&gt;
      }
  });
  
  var DisplayTable = React.createClass({
        doSearch:function(queryText){
          console.log(queryText)
          //get query result
          var queryResult=[];
          this.props.data.forEach(function(person){
              if(person.name.toLowerCase().indexOf(queryText)!=-1)
              queryResult.push(person);
          });
  
          this.setState({
              query:queryText,
              filteredData: queryResult
          })
      },
  
      render:function(){
          //making the rows to display
          var rows=[];
          this.props.data.forEach(function(person) {
          rows.push(&lt;tr&gt;&lt;td&gt;{person.image}&lt;/td&gt;&lt;/tr&gt;)
          rows.push(&lt;tr&gt;&lt;td&gt;{person.name}&lt;/td&gt;&lt;/tr&gt;)
          });        
          //returning the table
          return(
               &lt;table&gt;
                  &lt;tbody&gt;{rows}&lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  });
  
  var tableData=[
  {
      name:'Paul mak',
      image: &lt;img width="50" src="./images/profile_img.png"/&gt;,
  },
  ];
  
  var dataSource=[
  {
      name:'Paul mak',
      image: &lt;img width="50" src="./images/profile_img.png"/&gt;,
  },
  {
      name:'John Doe',
      image : '002'
  },
  {
      name:'Sachin Tendulkar',
      image : '003'
  }];
  
  
  React.render(
    &lt;InstantBox data={dataSource}/&gt;,
    document.getElementById('content1')
  );
  </code></pre>