calling a function automatically

Question

i have a form that needs to make some validations to automaticall fill another fields, i want that function to be called automatically after all the required values are filled, i tried to do this with one onChange on the last field but it wouldnt work if the user fill that input before the other ones.

any suggestion? this is my api call

    const getRFC = ({vLastName,vSecondLastName,vName,vSecondName,vBirthDate}) => {
  ForceApi.post(`/GetRfcController.php`, {  vName, vSecondName, vLastName, vSecondLastName, vBirthDate })
    .then(res => {
      console.log(res.data.resultRFC);
      setvRFC(res.data.resultRFC);
    })
}

this are my text inputs and date picker

 return ( 
    <ScrollView>
      <View style={styles.buttonContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvName => setvName(newvName.toUpperCase())}
            value={vName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Segundo nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvSecondName => setvSecondName(newvSecondName.toUpperCase())}
            value={vSecondName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
          </View>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="Apellido paterno"
              underlineColorAndroid='transparent'
              onChangeText={newvLastName => setvLastName(newvLastName.toUpperCase())}
              value={vLastName}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="Apellido materno"
              onChangeText={newvSecondLastName => setvSecondLastName(newvSecondLastName.toUpperCase())}
              underlineColorAndroid='transparent'
              value={vSecondLastName}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>
          <View style={styles.containerdate}>
            <DatePicker 
              date={vBirthDate} //initial date from state
              mode="date" //The enum of date, datetime and time
              placeholder="select date"
              format="DD/MM/YYYY"
              minDate="01/01/1900"
              maxDate="01/01/2019"
              confirmBtnText="Confirm"
              cancelBtnText="Cancel"
              androidMode="spinner"
              customStyles={{
                placeholderText: {
                  fontSize: 16,
                },
                dateIcon: {
                  height: 0,
                  width: 0,
                },
                dateText: {
                  color: '#b3b4b5',
                  fontSize: 16,
                },
                dateInput: {
                  borderWidth: 0,
                }
              }}
              onDateChange={(date) => {setvBirthDate(date);} }
            />
          </View>

this is the text input that has to be updated with the value of the api

         <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder={vRFC}
              underlineColorAndroid='transparent'
              value= {vRFC}
              editable={false} 
              selectTextOnFocus={false}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>

any help would be appreciated

Have a single object for state of every input. which would allow easy access of input value from all component. And on each event you can do input validation and if all is well perform some action. — Sarthak Dwivedi
– Sarthak Dwivedi, Commented Jan 11, 2020 at 4:00

Tuan Luong · Accepted Answer · 2020-01-16 05:16:14Z

2

You could use useEffect hook

useEffect(() => {
    if (vLastName && vSecondLastName && vName && vSecondName && vBirthDate) {
        getRFC({vLastName, vSecondLastName, vName, vSecondName, vBirthDate});
    }
}, [vLastName, vSecondLastName, vName, vSecondName, vBirthDate]);

edited Jan 16, 2020 at 5:16

answered Jan 11, 2020 at 6:41

Tuan Luong

4,2021 gold badge20 silver badges21 bronze badges

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

4 Comments

user10625391 Over a year ago

srry i tried this but it throws me error it says that vLastName its undefined

Tuan Luong Over a year ago

Could you update your question above with your full latest code?

user10625391 Over a year ago

the problem was that in getRFC(); i wasnt sending the parameters

Tuan Luong Over a year ago

If your getRFC need params, you have to pass them to your method call. See updated answer above.

Collectives™ on Stack Overflow

calling a function automatically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related