title: Adding two input values in one state Reactjs
body: <p>I want to add a field of <code>trip_start</code> and <code>trip_end</code> in one state called <code>name</code> so that when  I send the data, it's combined into one field <code>name</code>.</p>
  
  <p>This is what happens when I submit the data, when I click the first time the state for <code>name</code> shows null, when I click for the second time that's when the state of <code>name</code> is populated with the data of <code>trip_start</code> and <code>trip_end</code>.</p>
  
  <p>Below is my code :</p>
  
  <pre class="lang-js prettyprint-override"><code>export class DriverPage extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              name: '',
              trip_start:'',
              trip_end:'',
              nameError:'',
              details:'',
              detailsError:'',
              price: '',
              priceError:'',
              driver_name: localStorage.getItem('username')
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
  
      }
  
      handleSubmit = (event) =&gt; {
          event.preventDefault();
          console.log('state ', this.state.name)
          this.setState({name:''+this.state.trip_start+' to ' + this.state.trip_end});
  
         };
  
    handleChange =(evt) =&gt; {
          this.setState({ [evt.target.name]: evt.target.value });
      }
  </code></pre>
  
  <p>Below is my component which contains the HTML code :</p>
  
  <pre class="lang-js prettyprint-override"><code>export const DriverComponent = ({handleSubmit, handleChange,obj})=&gt;(
  
      &lt;div className={'bg-image'}&gt;
              &lt;Card className={'landing-card'}&gt;
                  &lt;form onSubmit={handleSubmit}&gt;
                  &lt;Row&gt;
                      &lt;Col s={12} m={12} l={12}&gt;
                          &lt;label s={12} l={12} className={'header'}&gt;  Make Ride Request &lt;/label&gt;
                      &lt;/Col&gt;
                      &lt;Input s={12} l={12} type={'text'} value={obj.trip_start} label="Trip Start" name='trip_start'  onChange={handleChange}/&gt;
  
                      &lt;Input s={12} l={12} type={'text'} value={obj.trip_end} label="Trip End" name='trip_end'  onChange={handleChange}/&gt;
  
                      &lt;Col s={12} m={12} l={6}&gt;
                          &lt;div className={'errors'} s={10}&gt;{obj.nameError}&lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;div className="input-field col s12"&gt;
                          &lt;textarea id="details" name='details' onChange={handleChange} className="materialize-textarea"&gt;&lt;/textarea&gt;
                          &lt;label htmlFor="details"&gt;Trip Details&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;Col s={12} m={12} l={6}&gt;
                          &lt;div className={'errors'}&gt;{obj.detailsError}&lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;Input s={12} l={12} type="text" value={obj.price} label="Price" name='price' onChange={handleChange} /&gt;
                      &lt;Col s={12} m={12} l={6}&gt;
                          &lt;div className={'errors'}&gt;{obj.priceError}&lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;Col s={12} m={12} l={12}&gt;
                          &lt;Button waves='light' className={`purple button-align`} value='submit' type='submit' &gt;Create Ride Request&lt;/Button&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;/form&gt;
              &lt;/Card&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>So in summary, I want the state <code>trip_start</code> and <code>trip_end</code> to be concatenated on the state <code>name</code> instantly while am going to send the data.</p>
  
  <p>For example this is a simple pseudo code for what I want to achieve:</p>
  
  <pre class="lang-js prettyprint-override"><code>trip_start = new york
  trip_end = toronto
  
  name = trip_start + "to " +trip_end
  
  Output 
  
  name = new york to toronto
  </code></pre>