Is it possible to have two separate functions within one condition? My objective is to create 3 buttons that call one function to change the value of this.state.status based on the preferred condition.
'all' = null (this is my desired outcome, where the parameter default should be status=null or ' ') and I want this.state.status to be null
'approve' = approve (status=approve) my aim for this.state.status: approve
'progress' = progress (status=progress) my goal for this.state.status: progress
this.state = {
status: '',
}
}
//---------------------button sort--------------------------//
onButtonChange = (status, value) => {
setTimeout(() => AppActions.loadingMask(true))
if (status === 'all')
{
_.set(this.state.data, status, null).set(this.state.status, status, ' ')
// status = null - my goal is for this.state.status to be ' '
}
else if (status === 'approve')
{
_.set(this.state.data, status, 'approve').set(status, this.state.status, 'approve')
// status = approve - my goal is for this.state.status to be approve
}
else if (status === 'progress')
{
_.set(this.state.data, status, 'progress').set(status, this.state.status, 'progress')
// status = progress - my goal is for this.state.status to be progress
}
BookingsTripsAction.getTrips(
this.DEFAULT_LIMIT,
this.state.activePage,
_.get(this.state.data, status, status))
}
<Col>
<Paper>
<FlatButton label="All" style={{margin: 12, borderBottom:(this.state.status == 'all' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'all')} />
<FlatButton label="Approve" style={{margin: 12, borderBottom:(this.state.status == 'approve' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'approve')} />
<FlatButton label="In-Progress" style={{margin: 12, borderBottom:(this.state.status == 'progress' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'progress')} />
</Paper>
</Col>