Adding two input values in one state Reactjs - reactjs

Question

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

Answer 1

Is there any reason why it has to be concatenated before submission? Seems like you're making your life harder by combining two asynchronous strings synchronously. Instead, just make your life easier and concatenate upon form submission.
Concatenated on form submission example (best solution): https://codesandbox.io/s/10w18m5z54
containers/Form.js
import React, { Component } from "react";
import Fields from "../components/Fields";
export default class Form extends Component {
state = {
tripStart: "",
tripEnd: ""
};
handleChange = ({ target: { value, name } }) =>
this.setState({
[name]: value
});
handleSubmit = e => {
e.preventDefault();
const { tripEnd, tripStart } = this.state;
const name = `${tripStart} to ${tripEnd}`;
alert(name);
};
render = () => (
<Fields
{...this.state}
handleSubmit={this.handleSubmit}
onHandleChange={this.handleChange}
/>
);
}
Concatenated on input change example (works, but not an ideal solution as it causes double rerendering -- also, this.state.name is never used in your component, so utilizing state is unnecessary and not recommended!): https://codesandbox.io/s/nk66v4rk9j
containers/Form.js
import React, { Component } from "react";
import Fields from "../components/Fields";
export default class Form extends Component {
state = {
tripStart: "",
tripEnd: ""
};
handleChange = ({ target: { value, name } }) =>
this.setState(
{
[name]: value
},
() =>
this.setState({
name: `${this.state.tripStart} to ${this.state.tripEnd}`
})
);
handleSubmit = e => {
e.preventDefault();
const { name } = this.state;
alert(name);
};
render = () => (
<Fields
{...this.state}
handleSubmit={this.handleSubmit}
onHandleChange={this.handleChange}
/>
);
}