Onpress with conditional will not call a function - react-native

Question

I have some problem with onPress button function,
if I create button and calling function directly it work well,
but if I'm using conditional it will not call the function.
I already create 2 button below to simulate, button with title "submit normal" can call function and pass the property successfully, button with title "submit conditional" will not calling this.makeRemoteRequest.bind(this); but if you put alert it will react normally, nothing happen if calling a function.
<Input
containerStyle={{ width: '90%' }}
placeholder="Predefined User ID"
label="User ID"
labelStyle={{ marginTop: 16 }}
editable={false}
value={this.state.userid}
onChangeText={input_user_id => this.setState({ input_user_id })}
/>
<Input
containerStyle={{ width: '90%' }}
placeholder="Please fill services request notes here"
label="Reason"
labelStyle={{ marginTop: 16 }}
onChangeText={input_services_detail => this.setState({ input_services_detail })}
/>
<Button
title='Submit Conditional'
onPress={() => {
if (this.state.input_services_detail != null)
{
this.makeRemoteRequest.bind(this);
}
else
{
Alert.alert('Please fill the service detail first');
}
}}><Text style={styles.buttonText}>Submit Aset</Text>
</Button>
<Button
title='Submit Normal'
onPress={this.makeRemoteRequest.bind(this)}><Text style={styles.buttonText}>Submit Aset</Text>
</Button>
</View>
Expecting to call a function using conditional. Appreciate if somebody can brief me on this. Thanks before.

Answer 1

I would say this is kind of a bad practice to achieve this behaviour.
A better way to write it would be like this -
<Button
title='Submit Conditional'
onPress={this.onPressSubmitButton.bind(this)}>
<Text style={styles.buttonText}>Submit Aset</Text>
</Button>
Changed the name of the onPress function to onPressSubmitButton
And the onPressSubmitButton function -
onPressSubmitButton() {
if (this.state.input_services_detail === null) {
return Alert.alert('Please fill the service detail first')
}
this.makeRemoteRequest()
}
I think it more clear to read and understand.
Also you can write the function signature like this -
onPressSubmitButton = () => {
...
}
which make it bound already, this way you can call it like this -
<Button
title='Submit Conditional'
onPress={this.onPressSubmitButton}>
<Text style={styles.buttonText}>Submit Aset</Text>
</Button>

Answer 2

You're not calling this.makeRemoteRequest in your condition, you're just binding it. Change your conditional onPress prop like this :
onPress={this.state.input_services_detail != null ? this.makeRemoteRequest.bind(this) : () => Alert.alert('Please fill the service detail first')}
And you don't need the != null :
onPress={this.state.input_services_detail ? this.makeRemoteRequest.bind(this) : () => Alert.alert('Please fill the service detail first')}