title: Update functionality in react
body: <p>I am newbie to React and I am trying to do update on react. I don't get the exact logic to make it and hence I need your help.<br/>
  On click of update, I managed to get the values of selected contact but later on, i don't get how to populate those value onto input text boxes and again on submit after change of values, update the selected contact. I came across onChange but I don't understand. </p>
  
  <p>Clues i knew: <br/>
   this.refs.name.value and this.refs.number.value are values which are in input textbox . And on update, we need to set these value into the state on that corresponding index.</p>
  
  <p>My code and screenshot is below: <br/>
  <strong>Person.js</strong> - number is taken as the key , considering individual number is unique</p>
  
  <pre><code> editcontact(id){
       this.props.onChange(id);
     }
    render() {
  
            return(
  
              &lt;div className="panel panel-default"&gt;
                &lt;div className="panel-heading"&gt;
                &lt;h4&gt;{this.props.detail.name}  &lt;/h4&gt;
                &lt;a className="b" href="#" onClick={this.deletecontact.bind(this,this.props.detail.number)}&gt; Delete &lt;/a&gt;
                &amp;nbsp;
                &lt;a className="b" href="#" onClick={this.editcontact.bind(this,this.props.detail.number)}&gt; Update &lt;/a&gt;
                &lt;/div&gt;
  
                 &lt;h6 className="panel-body"&gt;{this.props.detail.number}&lt;/h6&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            )
          }
  </code></pre>
  
  <p>It is passed to <strong>Contact.js</strong></p>
  
  <pre><code>editcontact(id)
   {
     this.props.onChange(id);
   }
    render() {
       var details;
       if(this.props.data){
          details=this.props.data.map(dts=&gt;{
            return(
              &lt;Person key={dts.number} detail={dts} onChange={this.editcontact.bind(this)} onDelete={this.deletecontact.bind(this)}&gt;&lt;/Person&gt;
            )
          })
  </code></pre>
  
  <p>}</p>
  
  <p>Then comes <strong>App.js</strong></p>
  
  <pre><code>  handleEdit(id){
        console.log(id);
        let cts=this.state.contacts;
        let index=cts.findIndex( x =&gt; x.number === id);
        console.log(cts[index]);
    this.setState({ selectedContact: cts[index]; });
  
          }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="page-header"&gt;
  
            &lt;h2&gt;Contact list&lt;/h2&gt;
          &lt;/div&gt;
          &lt;AddContact newOne={this.state.selectedContact} addcontact={this.handleAddition.bind(this)}&gt;&lt;/AddContact&gt;
           &lt;Contact onChange={this.handleEdit.bind(this)} onDelete={this.handleDelete.bind(this)} data={this.state.contacts}&gt; &lt;/Contact&gt;
        &lt;/div&gt;
  
      );
  </code></pre>
  
  <p>}</p>
  
  <p><strong>AddContact.js</strong></p>
  
  <pre><code>    constructor(){
      super();
      this.state={
        newContact:{
          name:'',
          number:''
        }
      }
    }
      addcontact(e){
      //   console.log(this.refs.name.value);\
      e.preventDefault();
         this.setState({
           newContact:{
             name: this.refs.name.value,
             number:this.refs.number.value
           }
         },function(){
           console.log(this.state.newContact);
           this.props.addcontact(this.state.newContact);
         })
          this.refs.name.value="";
          this.refs.number.value="";
      }
  
  
  
        render() {
               console.log(this.props.newOne);
          return (
            &lt;div className="col-md-6"&gt;
            &lt;form  onSubmit={this.addcontact.bind(this)}&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Name &lt;/label&gt;
            &lt;input className="form-control" type="text" ref="name" /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Number&lt;/label&gt;
            &lt;input className="form-control" type="number" ref="number" /&gt;
            &lt;/div&gt;
            &lt;input type="submit" value="Submit"/&gt;
            &lt;/form&gt;
            &lt;/div&gt;
          );
        }
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2imA4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2imA4.png" alt="enter image description here"></a></p>