title: How to set State variable for form Data
body: <p>I have an Form Data input in react js application. I have tried below code to set Form Data state variable but value is showing as empty. Please check below code and advise how to do this...</p>
  
  <p><strong><em>Initial State :-</em></strong></p>
  
  <pre><code>this.state = {
    FormData: [{
      UserId: 0,
      FirstName: '',
      LastName: '',
      EmailId: '',
      MobileNo: '',
      DivisionId:'',
      UserName: '',
      Password: '',
      ConfirmPassword: '',
      RoleId: '',
      UpdateUserName: localStorage.getItem("UserId"),
      GridState: []
    }],
  </code></pre>
  
  <p>};</p>
  
  <p><strong><em>Setting State Value in onchange event :-</em></strong></p>
  
  <pre><code>onChangeHandler = (event) =&gt; {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  </code></pre>
  
  <p><strong><em>HTML render:-</em></strong></p>
  
  <pre><code>render() {
  &lt;div className="form-group row"&gt;
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;First Name&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="text" name="FormData.FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" required onChange={this.onChangeHandler}/&gt;
                    &lt;/div&gt;
  
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;Last Name&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="text" name="FormData.LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" required onChange={this.onChangeHandler}/&gt;
                    &lt;/div&gt;
  
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;Email Id&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="email" name ="FormData.EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" required onChange={this.onChangeHandler}/&gt;
                    &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div className="form-group row"&gt;
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;Mobile No&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="text" name ="FormData.MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" onChange={this.onChangeHandler} /&gt;
                    &lt;/div&gt;
  
  
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;User Name&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="text" name ="FormData.UserName" className="form-control form-control-sm" id="TxtUserName" placeholder="User Name" required onChange={this.onChangeHandler}/&gt;
                    &lt;/div&gt;
  
                    &lt;/div&gt;
  
                    &lt;div className="form-group row"&gt;
                    &lt;label  className="col-sm-1 col-form-label col-form-label-sm"&gt;Password&lt;/label&gt;
                    &lt;div className="col-sm-3"&gt;
                      &lt;input type="password" name ="FormData.Password" className="form-control form-control-sm" id="TxtPassword" placeholder="Password" required onChange={this.onChangeHandler}/&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Please check submit button handling code :-</em></strong> </p>
  
  <pre><code>onSubmitHandler = (event) =&gt; {
    event.preventDefault();
    console.log(JSON.stringify(this.state.FormData));
    alert(JSON.stringify(this.state.FormData));
  
  }    
  </code></pre>