Toggle button based on input (Native Base)

Question

I want to disable button when both or one of the inputs is empty. Btw, it is Native Base framework.

    <View style={styles.personal} key={data}>
        <Item floatingLabel>
          <Label>Your name:</Label>
          <Input />
        </Item>
        <Item floatingLabel style={{marginVertical: 20}}>
          <Label>Your age:</Label>
          <Input keyboardType="numeric"/>
        </Item>
        <Button style={{alignSelf: 'center'}} rounded disabled={false}
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
          </Button>
      </View>

What I have tried:

state = {
  inputName: "",
  inputAge: "",
}
<Input value={this.setState({inputName: value})}/> 
<Input value={this.setState({inputAge: value})} keyboardType="numeric"/>
<Button style={{alignSelf: 'center'}} rounded 
          disabled={this.state.inputName==="" & this.state.inputAge==="" ? true:false }
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
        </Button>

Error with variable value

Md Sabbir Alam · Accepted Answer · 2020-11-19T06:40:17.590

0

You missed extra & in the condition.

Your condition should look like this,

disabled={this.state.inputName==="" || this.state.inputAge==="" ? true:false }

Because for logical AND operation the result will be true only when both the input is empty. If any of the input is not empty the result will be false and it will enable the button. So you need to use logical OR operation so that the condition will return true when any of the input is empty.

&& is the logical AND operation

& is the bitwise AND

Find the difference between & and && here.

You can do the following to save input values in state.

<Input onChangeText={val => this.setState({ inputName: val })} value={this.state.inputName}/> 
<Input onChangeText={val => this.setState({ inputAge: val })} value={this.state.inputAge} keyboardType="numeric"/>

edited Nov 19 '20 at 06:40

answered Nov 19 '20 at 06:21

Md Sabbir Alam

4,937
3
15
30

ohh i see, but error still persists "Can't find variable value" – Nov 19 '20 at 06:25
How can i assign value of Input(it's TextInput) to state? – Nov 19 '20 at 06:27
You should use onChange event handler to update the input values in state. I am updating my code with that part. – Md Sabbir Alam Nov 19 '20 at 06:28
i did this.setState({inputName: value})} /> for both inputs, but button enabling if one of the inputs has value, but i need to check both – Nov 19 '20 at 06:32
yeah i have replaced – Nov 19 '20 at 06:35
Oh if you want to disable the button when any of the input is empty you need to replace the `&&` with `||`, – Md Sabbir Alam Nov 19 '20 at 06:38
it worked, thank you. one last thing, how can i validate Input age to be number only? – Nov 19 '20 at 06:40
In the onChange method you can check if the value is number or not. if the value is a number you will update the state. Otherwise you can ignore that value. – Md Sabbir Alam Nov 19 '20 at 06:43
There are multiple ways to check for number or not. – Md Sabbir Alam Nov 19 '20 at 06:43

Toggle button based on input (Native Base)

1 Answers1