2

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.

2
  • may we have some feedback on the answers ?
    – adesurirey
    Jun 14, 2019 at 8:42
  • hi adesuriah, your answer also help me to solve the conditional function, thanks!
    – abet
    Jun 16, 2019 at 5:01

2 Answers 2

0

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>
1
  • Hi nati, thanks for the brief explanation, so i follow the proper way to make conditional function based on your suggestion and it works! thanks.
    – abet
    Jun 16, 2019 at 5:00
0

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')}
1
  • Revision 3 was plagiarised (but function name was changed) from stackoverflow.com/a/56578839, which was posted before revision 3 (compare both posts' revision timestamps). Rolling back to revision 2.
    – Samuel Liew
    Jun 15, 2019 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.