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})

Answer 1

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

1. 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>
            )
          }

2. 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.

Answer 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.