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
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>