How to render react component inside function in another component?

Question

So i need to render "Alert" component, which informs user about succesfully action in component - inside function, which adding item to cart/localstorage.

Alarm Component:

class Alarm extends React.Component{

    render(){
        return(
                <Alert color="success">
                This is a success alert — check it out!
                </Alert>
        )
    }
}

Function in another component:

addToCart = () => {
  (Some Logic...)
}

EDIT

I have 2 components:

Alarm (return Alert Component)
Product Item (include function addToCart)

After initializing function addToCard I need to render Alarm Component

SOLUTION

I declare "x" in constructor state:

constructor(props) {
    super(props);
    this.state = {
        quantity: 1,
        x: false
    }
}

And add to ProductItem component:

<div>
    { this.state.x &&
      <Alarm />
    }      
  </div>

And inside function just:

this.setState({x: true})

I can't understand what you want, please create Minimal, Complete, and Verifiable example — Vencovsky
– Vencovsky, Commented Apr 25, 2019 at 17:51
what errors are you encountering, it looks like you are returning a component from within a render function, which is expected. what is the issue? — HolyMoly
– HolyMoly, Commented Apr 25, 2019 at 17:52
It's not very clear what you mean, but I think you want to show an alert when a user successfully added an item to the cart? If so, you could use the local state of the component you are developing, which could contain a value that makes the render method know whether to render the alert or not. More info: reactjs.org/docs/… — Sanders
– Sanders, Commented Apr 25, 2019 at 17:58

Rahul Saini · Accepted Answer · 2023-10-24 13:30:27Z

2

As I understand you want to render Alarm(which contains Alert) component. There are two places where you can do it.

Inside Product Item component or inside any component: For this one, you can use some local state or maybe a redux state

        render(){
          // const {showAlert} = this.props; // if redux state
          const {showAlert} = this.state; // local state
          return(
              <div>
                { showAlert &&
                  <Alarm />
                }      
              </div>
            )
          }

Outside the DOM hierarchy of the parent component: Then you can use the Portals. Because, Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is mostly useful for loaders and alert message pop-ups.

edited Oct 24, 2023 at 13:30

answered Apr 25, 2019 at 18:28

Rahul Saini

2221 silver badge16 bronze badges

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

Comments

xadm · Accepted Answer · 2019-04-25 18:09:46Z

2

'Standard comunication' between components in react is done by passing props from parent to child (even a few levels deep). Read docs. Common/app wide state can be deployed using redux, context API, apollo etc.

In this case you probably need to use portals.

answered Apr 25, 2019 at 18:09

xadm

8,4463 gold badges17 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to render react component inside function in another component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related