I am creating a component of type Toast for notification control, I don't want to add it to dom like:
<Toast title="notification" visible={state.toast} />
It seems impractical to me and I would have to create states.
How could I do it using a call like this:
toast.info({title: 'notification'});
Toast component.
export const Toast = ({title}) => {
return <div className="toast">
{title}
</div>
}
Toast
One way can be to wrap curly braces {} so you can use it as an expressionjavascript
:Now, even though it's called this way, the
div
enToast
is a ReactJS Element and is still part of the ReactJS Virtual DOM tree .Hope this answer is helpful.