0

I'm trying to set use setstate inside a function which is called on form submit, I am also using preventDefault:

const [ucasTariff, setUcasTariff] = useState<string>('');

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  
  const target = e.target as typeof e.target & {
    ucasPoints: {value: string};
  };
  
  setUcasTariff(target.ucasPoints.value);
}

logging the target.ucasPoints.value prints the correct value but logging the value of ucasTariff gives <empty string>
This is how I am calling the function in the <form> element: onSubmit={(e) => handleSubmit(e)}

How can I set the value properly?

Edit: forgot to mention that actually it does get set but only on the second time I click my submit button.

Edit 2: the suggested question is somewhat helpful in understanding what is going on but doesn't answer the question because following those answers does not solve the issue but creates new ones when trying to send my axios request. So I am still looking for an answer.

Win Barua
  • 131
  • 1
  • 1
  • 5
  • Thank you it was actually helpful, just a bit strange because I have other functions similar where setstate is working fine but for this one specific implementation I have to use useEffect() – Win Barua Mar 28 '23 at 18:50
  • take a look at this [answer](https://stackoverflow.com/a/75844926/13488990) – Ahmed Sbai Mar 28 '23 at 19:59

0 Answers0