I am working on a Flight API and I need to implement functionality where when the user clicks on the return journey field, the button toggles from single trip to round trip (false to true).
<DatePicker
hintText="Return Date"
errorText={this.state.journeyDateErrorText}
onChange={(event, value) => {
this.setState({journeyDate: value})
}}
minDate={new Date()}
onClick={this.enableReturnDate.bind(this)}
/>
The above code shows my datepicker field. When the user clicks on it, I want to toggle the toggle component from false (single trip) to true (round trip).
<Toggle
thumbSwitchedStyle={{backgroundColor: 'grey'}}
onToggle={this.handleonToggle.bind(this)}
label={this.state.tripType}
defaultToggled={false}
/>
To achieve the desired result, I have added an onClick event that changes the state of the toggle, which is displayed as the label this.state.tripType.
enableReturnDate(e){
this.setState({
tripType: 'Round Trip'
})
}
After adding the onClick event, the toggle state this.state.tripType changes from single trip to round trip. However, I also need to change the toggle button from false to true.
How can I accomplish this task?