SetState not updating the value in react js functional component

Question

in a functional component i need to show the message to user that email is being sent
i am changing the html element text by set state

here is the code

const [visibility, setVisibility] = useState("hidden");
const [MessageText, setMessageText] = useState("");



 function sendEmail()
    {
    setVisibility('visible');
    setMessageText("Sending email to the recipients.Please wait...");
     functionToSendEmail();
    }


    <label className="cs-label" id="lblMessage" 
style={{ color: '#800000', fontWeight: 'bold', visibility: visibility }}> {MessageText} </label>

here message is not showing in the label element but if instead of setMessageText if i use

document.getElementById('lblMessage').innerHTML = "Email sent to the recipients successfully";

then its working fine showing message to user

Answer 1

On this code you posted, you're not calling sendEmail() function anywhere. You may call it, then it will call setMessageText().

Try something like this:

<button onClick={() => sendEmail()}>Send email</button>