react js can't update button status using useState-CodePudding

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.

CodePudding user response：

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