Validate fields in React

Question

I have some input fields, both are set to states. I would like to make sure that you only allow clicking on the button if these fields are filled in. Obs:. I am Using Hooks

const [ name, setName ] = useState('');
const [ user, setUser ] = useState('');
const [ datanascimento, setDataNascimento ] = useState('');
const [ tel, setTel ] = useState('');
const [ email, setEmail] = useState('');



 <TouchableOpacity
      onPress={() => navigation.navigate('DeliverymanPhotos')}
      style={styles.btnPrimary}>
      <Text style={styles.btnPrimaryText}>
        Confirmar
      </Text>
    </TouchableOpacity>

Answer 1

The simplest way to do this is to check that the fields are filled in, e.g.: If the name and email field is equal to "" changes the value of the disabled parameter to true otherwise to false

Answer 2

You can do a check before browsing, if all states are different from an empty string, then you can browse.

const [ name, setName ] = useState('');
const [ user, setUser ] = useState('');
const [ datanascimento, setDataNascimento ] = useState('');
const [ tel, setTel ] = useState('');
const [ email, setEmail] = useState('');

  function checkToNavigate() {
    if((name, user, dataNascimento, tel, email) !== '')
      return navigation.navigate('DeliverymanPhotos');
  }


  <TouchableOpacity
    onPress={() => checkToNavigate()}
    style={styles.btnPrimary}>

    <Text style={styles.btnPrimaryText}>
      Confirmar
    </Text>
  </TouchableOpacity>