How can I render an element when I clicked the function in ReactJS

Question

How can I render an element when I clicked the function in ReactJS?

I have a component Notifications and imported to the main component. I coded a function to check the validation and render the Notifications component:

const submit = () => {
      if (name === '' || email === '' || phone === '' || subject === '' || message === '') {
        setStateOfInput();
        //I don't know how to render the <Notifications/> from here
      }
      else if (email.indexOf('@') === -1) {
        //And here
        setStateOfInput();
      }
...

I used return ( <Notifications/> ) but it wasn't working!

I'm new to ReactJs so thanks for all your help!

Answer 1

I would set a state inside to control of rendering your component but if you really want to return in function you can do something like that

const submit = () => {
      if (name === '' || email === '' || phone === '' || subject === '' || message === '') {
        setStateOfInput();
        return <Notifications />
      }
      else if (email.indexOf('@') === -1) {
        setStateOfInput();
        return <SomeComponent />
      }
...

Inside the main return of the component you can call this function

    return (.......

<div>{submit()}</div>

.....
)