I have console.log(ed) the values while executing and what happens is on the first click, inputValue is sent with a null string to api, then on the next click the inputValue with string is sent to api. I have already changed the value of inputValue using the setter function in input tag with onChange function and then i have called the api so How do i fix it so it sends it on the first click.
const InputEmail = () => { const navigate = useNavigate() const [inputValue, setInputValue] = useState('') const [apiData, setApiData] = useState('') const [isError, setIsError] = useState(false) // useEffect(() => { // //API() // }, []) const API = () => { console.log(inputValue) axios .post(url, { email: inputValue }) .then((response) => { setApiData(response.data) }) console.log(apiData.is_active) } const handleSubmit = () => { API() if(apiData.is_active) { localStorage.setItem('email',inputValue) navigate("/assessment") } else { setIsError(true) } } return ( <div className='main'> <FormControl> <h2 className='text'>Registered Email address</h2> <Input id='email' type='email' value={inputValue} onChange={e => setInputValue(e.target.value)}/> { isError ? <FormHelperText color='red'>Email not found. Please enter registered email</FormHelperText> : null } <Button mt={4} colorScheme='teal' type='submit' onClick={handleSubmit} > Submit </Button> </FormControl> </div> ) }
Advertisement
Answer
You must wait for your axios to fetch data from the url before making a handle. It will work if you await untill your async API() functions brings data.
const API = () => { return axios.post(url, { email: inputValue, }); }; const handleSubmit = async () => { const response = await API(); if (response.data.is_active) { localStorage.setItem("email", inputValue); navigate("/assessment"); } else { setIsError(true); } };