Search function is not working properly

i am just creating a table with search and edit functions.My solution has a problem the search is not working properly .but if i remove this line from DisplayTable class the search function will work but the edit function codes are written in that class.i dont know how to solve this problem please help me to solve this .

 /**

* @jsx React.DOM */ //Making the main component, InstantBox

 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, data:queryResult })

  },

  handleClick: function() {
    this.setState({ showResults: true });     

   },
    getInitialState:function(){

     return{data:this.props.data,showResults: false}    
  },

    onChangeName:function(e){     
   this.setState({name:e.target.value})

  },
  onChangePhone:function(e){    
  this.setState({phone:e.target.value})
  },
  onChangeEmail:function(e){
  this.setState({email:e.target.value})
  },
  handleSubmit:function(e){

 if(this.state.name==null){

  alert("Data cannot be added without name");

 }else{

 this.setState({ showResults: false });
e.preventDefault();
this.state.data.push({name:this.state.name,phone:this.state.phone,email:this.state.email});
this.setState({name:'',phone:'',email:''})    
 var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert( xmlhttp.responseText);
        }
    }

     xmlhttp.open("GET", "insert.php?n=" +           
     this.state.name+"&p="+this.state.phone+"&e="+this.state.email, true);
    xmlhttp.send();
  }
  },
  render:function(){


      return (

            <div id="wrapper">             

                <div className="InstantBox" >   
                <h3 className="head">Contact List</h3>  
                <label> search  </label>              
                <SearchBox query={this.state.query} doSearch={this.doSearch}/> 
        <EditableCell id={this.state.query}   />
                <label>     </label>              
                <input type="submit" value="ADD" onClick={this.handleClick} />  
                <p></p>                    
                <DisplayTable data={this.state.data}/>

             </div>
            <div >                    
                 { this.state.showResults ? 
                <Results onChangeName={this.onChangeName}
                onChangePhone={this.onChangePhone}
                onChangeEmail={this.onChangeEmail}
                handleSubmit={this.handleSubmit}  /> 
                : null }
            </div> 
           </div>


        );
     }
   });


 var Results = React.createClass({      
   render: function() {
    return (
        <div id="results" className="search-results">
           <form  onSubmit={this.props.handleSubmit}>        
    <table className="addform">
    <thead>
         <tr> <th>Add New Contact</th> </tr>                 
        <tr><th><input type="text"  placeholder="Name" value={this.name}onChange=   
 {this.props.onChangeName}/></th> </tr>
        <tr><th><input type="text" placeholder="Phone" value={this.props.phone}onChange=

  {this.props.onChangePhone}/></th>  </tr>
        <tr><th><input type="text" placeholder="Email Name"  value={this.props.email}onChange=
   {this.props.onChangeEmail}/></th>  </tr>
        <tr><th><button >SAVE</button></th>

        </tr>
    </thead>
    </table>
    </form> 
        </div>
    );
   },

   });
 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 <input type="text" ref="searchInput" placeholder="Search Name" value=   
     {this.props.query} onChange={this.doSearch}/>
  }


});



 var EditableCell = React.createClass({
  getInitialState: function () {
    return {
        isEditMode: false,
        data: ""
    };
   },
   componentWillMount: function () {
    this.setState({
        isEditMode: this.props.isEditMode,
        data: this.props.data


    });
   },
   handleEditCell: function (evt) {
      this.setState({isEditMode: true});

   },
  handleKeyDown: function (evt) {

    switch (evt.keyCode) {
        case 13: // Enter          

        case 9: // Tab
            this.setState({isEditMode: false});
            break;

    }
        if(evt.keyCode==13){

       var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert( xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "update.php?n=" + this.state.data+"&i="+this.props.id, true);
    xmlhttp.send();
    }

   },
  handleChange: function (evt) {
    this.setState({data: evt.target.value}); 

   },


   render: function () {
    var cellHtml;
    var current_data;
   var counter=0;

   //alert(this.props.data);

    if (this.state.isEditMode) {


        cellHtml = <input type='text' value={this.state.data}
            onKeyDown={this.handleKeyDown} onChange={this.handleChange} />
    }
    else {
        cellHtml = <div onClick={this.handleEditCell}>{this.state.data}</div>
    }
    return (
        <td>{cellHtml}</td>
        );
     }
  });



 var DisplayTable = React.createClass({

   render:function(){
    //making the rows to display

    var rows=[];
    this.props.data.forEach(function(person)
 {

    rows.push(<tr >
   <EditableCell id={person.id} data={person.name}  />

       <td><a href="url">Phone</a></td>
         <td><a href="url">email</a></td></tr>
        )
    }.bind(this));


    //returning the table
    return(


         <table className="tableFormt">
            <thead>            
                <tr>                       
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                </tr>
            </thead>             
            <tbody>{rows}
            </tbody>
        </table>        

        );      
      }
   });  



    React.renderComponent( <InstantBox data={result} id={result} /> ,document.body);