title: React JS : Unable to capture the edited value
body: <p>I am new to React JS. I am trying to capture the edited value from formcontrol in handle change and assign it to a state object and later retrieve assign it to a variable to pass it as a part of the query string to an API for updating the field, handle change is the function called from form-control to assign the edited value to a state object. I am unable to do so; please provide your inputs. Your help is much appreciated. I would like to follow the same for other fields too.</p>
  <pre><code>import React, { PropTypes, Component } from 'react';
  import {
    Panel,
    Button,
    PageHeader,
    ControlLabel,
    FormControl,
    Pagination,
    Form,
    Accordion,
    Col,
    Radio,
    FormGroup
  } from 'react-bootstrap';
  import StatWidget from '../../src/components/Widget';
  import CRUDTable,
  {
    Fields,
    Field,
    CreateForm,
    UpdateForm,
    DeleteForm,
  } from 'react-crud-table';
  
  const DescriptionRenderer = ({ field }) =&gt; &lt;textarea {...field} /&gt;;
  
  const styles = {
    container: { margin: 'auto', width: 'fit-content' },
  };
  
  class displayDetails extends Component {
  
    constructor (props) {
      super(props);
      this.state = {
        updatecustomer: [],
        delcustomer: [],
        field1 = '',
      };
  
      this.handleUpdate = this.handleUpdate.bind(this);
      this.handleDelete = this.handleDelete.bind(this);
      this.handleCreate = this.handleCreate.bind(this);
      this.handleChange = this.handleChange.bind(this);
  
    };
  
    handleChange (e) {
      this.state.field1 = e.target.value; // This isn't happening
    }
  
    render() {
  
      firstName=this.props.respData.FIELD1;
      lastName=this.props.respData.FIELD2;
  
      return (
        &lt;div&gt;
            &lt;br&gt;&lt;/br&gt;
            &lt;div className=&quot;col-lg-3 col-md-6&quot;&gt;
            &lt;StatWidget
              style=&quot;panel-primary&quot;
              icon=&quot;fa fa-dollar fa-5x&quot;
              count={this.props.respData.FIELD1}
              headerText=&quot;FIELD1&quot;
              linkTo=&quot;&quot;
            /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-lg-3 col-md-6&quot;&gt;
            &lt;StatWidget
              style=&quot;panel-green&quot;
              icon=&quot;fa fa-phone   fa-5x&quot;
              count={this.props.respData.FIELD2}
              headerText=&quot;FIELD2&quot;
              linkTo=&quot;&quot;
            /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-lg-3 col-md-6&quot;&gt;
            &lt;StatWidget
              style=&quot;panel-yellow&quot;
              icon=&quot;fa fa-home fa-5x&quot;
              count={this.props.respData.FIELD3}
              headerText=&quot;FIELD3&quot;
              linkTo=&quot;&quot;
            /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-lg-3 col-md-6&quot;&gt;
            &lt;StatWidget
              style=&quot;panel-red&quot;
              icon=&quot;fa fa-shopping-bag fa-5x&quot;
              count={this.props.respData.FIELD4}
              headerText=&quot;FIELD4&quot;
              linkTo=&quot;&quot;
            /&gt;
            &lt;/div&gt;
            &lt;div&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;h1&gt;{this.props.respData.FIELD1} {this.props.respData.FIELD2}&lt;/h1&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/div&gt;
            &lt;div&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup style={spacing}&gt;
                  &lt;ControlLabel&gt;FIELD 1&lt;/ControlLabel&gt;
                  &lt;FormControl onChange={((e) =&gt; this.handleChange(this.props.respData.FIELD1))}
                    value={this.props.respData.FIELD1}
                    id=&quot;field1&quot; name=&quot;field1&quot;
                    type=&quot;text&quot;
                    placeholder=&quot;Enter Text&quot;
                  /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;br&gt;&lt;/br&gt;
            &lt;/table&gt;
            &lt;/div&gt;
            &lt;br&gt;&lt;/br&gt;
        &lt;/div&gt;
      )
    }
  }
     
  export default displayDetails; 
  </code></pre>