title: Unable to type in input after adding value in React Js
body: <p>I have tried with the following code with react js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Sidebar from './../Sidebar';
  import Header from './../Header';
  import {get_profile} from './../services/Services';
  import $ from 'jquery'; 
  
  
  export default class Profile extends Component {
    constructor(props) {
      super(props);
      this.state = { userDetails: '' } ; 
    }
    componentWillMount() {
      $(window).scrollTop(0)  
      console.log('sdfds')
      get_profile().then((response) =&gt; {  
  
          var userResults = $.parseJSON(response.text);    
          this.setState({ userDetails: userResults.response });
           console.log(userResults);
      }).catch((error) =&gt; {
              //alert(error)
          console.log(error); 
  
      });
    }
    handleChange(event) {
          console.log(event.target.id)
          this.setState({[event.target.name]: event.target.value});        
   }
  
    render() {
      return (
      &lt;div className="admin-panel"&gt;
          &lt;Sidebar /&gt;
          &lt;Header /&gt;
          &lt;div className="main-content"&gt;
              &lt;div className="contents"&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-sm-6"&gt;
                              &lt;h2 className="page-title"&gt;Profile&lt;/h2&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;label &gt;First Name&lt;/label&gt;
                                  &lt;input type="text" id="firstName"  className="form-control" value={this.state.userDetails.firstName}  /&gt;
                              &lt;/div&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;label &gt;Last Name&lt;/label&gt;
                                  &lt;input type="text" id="lastName"  className="form-control" value={this.state.userDetails.lastName} /&gt;
                              &lt;/div&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;label &gt;Email&lt;/label&gt;
                                  &lt;input type="text" id="email" name="email" className="form-control" value={this.state.userDetails.email} /&gt;
                              &lt;/div&gt;
                              &lt;button type="button" className="btn btn-squared btn-success margin-inline" onClick={(e)=&gt; {this.profileUpdate()}}&gt;Update&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>After fetching the results i'm unable to edit the input box value. I have tried with defaultValue but that also not working for me. I'm struck with this issue, Kindly help me to solve the issue. </p>