title: ReactJS - Not able to edit the input field after i bind the data from this.props.reducer.result.firstName(Used redux)
body: <p>Please note I'm  Material-ui react js component for my Textfield. I have not used redux-forms. </p>
  
  <p>I have declared the onchange listerner and state</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
      firstName: null,
      };
      this.handleInputChange = this.handleInputChange.bind(this);
  }
  
  componentDidMount() {
      // This is reducer function to get my data from server. I'm getting data and able to display it to my element.
      // I'm using redux for my data layer.
      this.props.getuserDetails(userId);
  }
  </code></pre>
  
  <p>I'm not sure how to update the input element value using state as well as the value i received from props via reducer function.</p>
  
  <pre><code>handleInputChange (event) {}
      this.setState({
      firstName: event.target.value
      });
  }
  </code></pre>
  
  <p>inside my render function.
  Textfield displays the user firstname. But its not allowing me to edit the field. Because i have bind the props.reducer directly. </p>
  
  <pre><code>&lt;TextField name="firstName" onChange={this.handleInputChange} floatingLabelText="First Name" value={this.props.reducer.result.firstName}/&gt;
  </code></pre>
  
  <p>How do i bind the data from dispatcher/reducer. and also accept user input to edit the first name. 
  later i can update it in server</p>
  
  <p>I'm struck with this issue. any help is appreciated. Thanks.</p>