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!

You don't "render it from there". The typical approach would be to set a flag that indicates it should be rendered then conditionally render it along with the rest of the component. — Dave Newton
– Dave Newton, Commented Apr 19, 2022 at 19:53

Evren · Accepted Answer · 2022-04-19 20:01:38Z

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>

.....
)

answered Apr 19, 2022 at 20:01

Evren

4,4601 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related