Conditional rendering of a text Input in react native

Question

How do you render a textInput conditionally such that when the value text in the textInput characters is less than 6, it logs an error when the user clicks the ok button

const [text, setText] = useState('')
<TextInput
  style={styles.textInputStyle}
  value={text}
  onChangeText = {(text) => setText(text)}
  placeholder="Text"
  placeholderTextColor="#60605e" />
<TouchableOpacity style={styles.button}
  onPress={() => {setText(text)} }>
  <Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>

Please make a working code example for your question, generally speaking you render conditionally by let's say smth like this {myBool && <div>smth</div>} — Julian Kleine
– Julian Kleine, Commented Oct 12, 2020 at 18:16
You don't need conditional rendering for this, your onPress handler needs to check the text length and log the error if text.length < 6. — Drew Reese
– Drew Reese, Commented Oct 12, 2020 at 18:50

Daniel Abdelsamed · Accepted Answer · 2020-10-12 19:34:04Z

2

Your onPress callback can manage this. It needs to do a check for text.length < 6 and then branch based off of the result. It might look like this (I removed the styling logic to showcase the callback):

const MyComponent = () => {
  const [text, setText] = useState('');

  return (
    <>
      <TextInput
         value={text}
         onChangeText = {(text) => setText(text)}
      />
      <TouchableOpacity
        onPress={() => {
          if(text.length < 6) {
            // Alert user of invalid input
            Alert.alert("Input must be less than 6 characters!") ;
            return;
          }
          // ... continue on to the desired task
        }}
      >
        <Text>OK</Text>
      </TouchableOpacity>
    </>
  );
}

answered Oct 12, 2020 at 19:34

Daniel Abdelsamed

4982 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional rendering of a text Input in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related