I want to set pending status in my button using useState when sumitting forms but I don't know where I am doing mistake:
here is my code:
const [is_pending, setIs_pending] = useState(false);
const SubmitContact = async (e)=>{
e.preventDefault()
setIs_pending = true;
let url = "http://localhost:8000/my-api/"
const res = await axios.post(url,{
contact_name:contact_name,contact_email:contact_email,contact_body:contact_body
}).then((res)=>{
console.log(res)
setIs_pending = false;
});
<form onSubmit={SubmitContact}>
...my others html code
{ !is_pending && <button className='btn btn-primary'>Send Message</button> }
{ is_pending && <button type='submit' className='btn btn-primary' disabled>Sending Message....</button> }
</form>
I set { is_pending && <button type='submit' className='btn btn-primary' disabled>Sending Message....</button> } when forms will be procession but I don't know why this status not showing when submitting forms.
setIs_pending is a function, and you can't set value using =!
To set value correctly you need to pass the value as param of setIs_pending, like:
YOUR_CODE....
setIs_pending(true);
YOUR_CODE....
You can read more here: https://pt-br.reactjs.org/docs/hooks-intro.html