title: How to use multiple or two state values in one component or class file in react JS?
body: <p>I am trying to use state to hide Semantic-UI Model form also to pass JSON to Customer class to add new customer. I am able to pass the value but in the end there is only one value. </p>
  
  <p><a href="https://i.stack.imgur.com/i2mVH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i2mVH.png" alt="View to add new customer"></a></p>
  
  <p>When I start typing name, in console panel on 1st character name is empty "" and on 2nd character there is single "a"
  <a href="https://i.stack.imgur.com/XycIL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XycIL.png" alt="name"></a></p>
  
  <p>In address 
  <a href="https://i.stack.imgur.com/FHh1x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FHh1x.png" alt="same thing happening with address"></a></p>
  
  <p>on create button click
  <a href="https://i.stack.imgur.com/V8MXQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V8MXQ.png" alt="on button click name is empty"></a></p>
  
  <p>when i click create button the name is empty"" and address has value.</p>
  
  <pre><code>import React from 'react';
  import { Button, Form, Modal } from 'semantic-ui-react';
  
  export default class AddCustomer extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          showCreateForm:false,
          formData:{
              name: '',
              address: ''
          }
      }
      this.handleChangeName = this.handleChangeName.bind(this);
      this.handleChangeAddress = this.handleChangeAddress.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChangeName(event) {
      const value = event.target.value;
  
      console.log(value);
  
      this.setState({formData:{name:value}});
  
      //when i go to add input the formData is still empty name is empty.
      //name: ""
      //address: ""
      console.log(this.state.formData);
  }
  
  handleChangeAddress(event) {
      const value = event.target.value;
      console.log(value);
      this.setState({formData:{address:value}});
  
      //name: "ram" but now there is no address in formData
      console.log(this.state.formData);
  }
  
  handleSubmit(event) {
      event.preventDefault();
  
      ////address: "aaaaa" now there no name in formData
      console.log(this.state.formData);
  
      this.setState({formData:{
          name:this.state.name, address:this.state.address
      }});
      this.props.onAddFormSubmit(this.state.formData);
  }
  
  //On cancel button click close Create user form
  closeCreateForm = () =&gt; {
      this.setState({ showCreateForm: false })
  }
  
  //Open Create new Customer form
  openCreateCustomer = () =&gt; {
      this.setState({ showCreateForm: true })
  }
  
  render() {
  
      return (
          &lt;div&gt;
              &lt;Modal closeOnTriggerMouseLeave={false} trigger={
                  &lt;Button color='blue' onClick={this.openCreateCustomer}&gt;
                      New Customer
          &lt;/Button&gt;
              } open={this.state.showCreateForm}&gt;
                  &lt;Modal.Header&gt;
                      Create customer
      &lt;/Modal.Header&gt;
                  &lt;Modal.Content&gt;
                      &lt;Form onSubmit={this.handleSubmit}&gt;
  
                          &lt;Form.Field&gt;
                              &lt;label&gt;Name&lt;/label&gt;
                              &lt;input type="text" placeholder ='Name' name = "name"
                                  value = {this.state.name} 
                                  onChange = {this.handleChangeName}/&gt;
                          &lt;/Form.Field&gt;
  
                          &lt;Form.Field&gt;
                              &lt;label&gt;Address&lt;/label&gt;
                              &lt;input type="text" placeholder ='Address' name = "address"
                                  value = {this.state.address}
                                  onChange = {this.handleChangeAddress}/&gt;
                          &lt;/Form.Field&gt;
                          &lt;br/&gt;
                          &lt;Button type='submit' floated='right' color='green'&gt;Create&lt;/Button&gt;
                          &lt;Button floated='right' onClick={this.closeCreateForm} color='black'&gt;Cancel&lt;/Button&gt;
                          &lt;br/&gt;
                      &lt;/Form&gt;
  
                  &lt;/Modal.Content&gt;
              &lt;/Modal&gt;
  
          &lt;/div&gt;
      )
  }
  
  }
  </code></pre>