title: React - How to handle nested forms and its value
body: <p>I have to setup one form which have nested values in single form
  Basically I need to send data in below format to API</p>
  
  <pre><code>Payload: {"name": "The org name", "detail": "The org detail", "attributes": {"address": {"lines":[], "city":"", "state": "", "country": "India", "zip": ""}, "contacts":[{"name": "abc", "phone": "PH"}, {"name": "x", "phone": "PH"}] }}
  </code></pre>
  
  <p>I used react-bootstrap for handling forms.</p>
  
  <p>below are the currrent code of my form </p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = this.getInitialState();
    }
    getInitialState() {
      const initialState = {
        organizationForm: {
          name: '',
          detail: '',
          type: 'org',
          attributes: {
            contacts: [{
              name: '',
              phone: ''
            }],
            address: {
              lines: [],
              city: '',
              state: '',
              country: '',
              zip: ''
            }
          }
        },
        errors: {}
      };
  
      return initialState;
    }
  
  handleChange(e) {
      const organizationForm = this.state.organizationForm;
      var key = e.target.name;
      var value = e.target.value;
      organizationForm[key] = value;
      this.setState({
        organizationForm
      });
    }
  </code></pre>
  
  <p>Below are the code of form</p>
  
  <pre><code>  &lt;Col className="create-content-wrap" sm={12}&gt;
          &lt;form className=""&gt;
            &lt;FormGroup className="custom-form-group required row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Name
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="name"
                value={organizationForm.name}
                onChange={this.handleChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group required row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Detail
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="detail"
                componentClass="textarea"
                value={organizationForm.detail}
                onChange={this.handleChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Address
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="lines"
                componentClass="textarea"
                value={organizationForm.lines}
                onChange={this.handleAddressChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                City
              &lt;/ControlLabel&gt;
              &lt;FormControl
                  className="custom-form-control col-sm-9"
                  type="text"
                  name="city"
                  value={organizationForm.attributes.address.city}
                  onChange={this.handleAddressChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                State
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="state"
                value={organizationForm.attributes.address.state}
                onChange={this.handleAddressChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Country
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="country"
                value={organizationForm.attributes.address.country}
                onChange={this.handleAddressChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Zipcode
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="number"
                name="zip"
                value={organizationForm.attributes.address.zip}
                onChange={this.handleAddressChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup className="custom-form-group row"&gt;
              &lt;ControlLabel className="custom-form-control-label col-sm-3"&gt;
                Contacts
              &lt;/ControlLabel&gt;
              &lt;FormControl
                className="custom-form-control col-sm-9"
                type="number"
                name="contacts"
                value={organizationForm.attributes.contacts}
                onChange={this.handleChange.bind(this)}
              /&gt;
            &lt;/FormGroup&gt;
          &lt;/form&gt;
        &lt;/Col&gt;
  </code></pre>
  
  <p>I am noobie in react js world. How can i bind nested fields of address and contacts ?</p>