ReactJS (Tailwind CSS)
I'm trying to work on a modal message. I want to send to my body web page with two conditions, one for the on the success and one on the error. Is possible to render a full component inside the function promise?
As additional info I'm using EmailJS for sending the request
5 Replies
This is my component:
I'm still learning react 😅
When you handle the success and error, you can set a usestate boolean, and conditionally render the content or children in your modal body. Something like
Is it possible to render a component within a function on a ternary operator
someone can correct if I'm wrong, but react components should be 'pure functions' and synchronous, not render async or in promises.
IDK if you're using a UI library - usually a Modal has a boolean prop like isOpen. A modal can use a css class to toggle display: none or block, for example.
in the EmailForm I would suggest a [openModal, setOpenModal] useState(false), or something like that (the setter part of a useState should use the same name as the first part, btw, so [onError, setOnError] for example), and take isOpen as a prop in your Modal component.
I assume you want the modal to pop up when it knows which text to display. So you can have the <Modal> in the return of your EmailForm, and set if it's displayed, and what message with a useState. It can be done with 1 variable, but I would use a second like [error, setError] = useState(null) that will decide which message to display
return (
<Modal isOpen={openModal} modalMessage={!error ? modalTextSuccess : error ? modalTextError : ""} />
... rest of form
You'll also want a method for closing the modal