after form onSubmit , setstate is not working

Question

Im very new at coding, and have a question on below issues.. I made a form with buttons inside, and tried to put setStatus in the onSubmit function in order to change the status as the form submitted.

it seems like axios.post part is working, but setStatus isn't.. could anyone kindly advise how to fix it..? would be highly appreciated!

 const handleSubmit=async(e)=>{ e.preventDefault() const reponse = await axios.post(`http:///`, {...info}) setScore("") setStatus(2) } const ChangeHandler=(e)=>{ const selected = e.target.value const btnSection = document.querySelector(".btn_section") if(selectedoption.=="......."){ btnSection.innerHTML =`<button type="submit">Submit </button>` setReason(selected) setScore(score) }else if(selectedoption ==="Select the Reason"){ alert("Please select the Reason") } }

 <div> <form onSubmit={handleSubmit}> <button type="submit" onClick={()=> { setScore(1) setReason("?") }}>Yes</button> {btnPressed. ( <> <p>...</p> <select onChange={ChangeHandler}> <option>Select</option> {Lists,map((list: index)=>{ return( <option key={index} value={name}>{name}</option> ) })} </select> <div className="btn_section" ></div> </> ):( <button onClick={BtnHandler}>No</button> )} </form> </div>

Answer 1

Your onClick of button is not getting called because your button type is submit . When your button type is submit and if you click the button the forms handleSubmit function will get called.

If you want to do update the state. Then you should consider moving the setState call inside the handleSubmit function.