CODEWITHSUNDEEP
reactjsfunctionrendering
Piotr Żak
Piotr Żak

Reputation: 2132

How to render react component inside function in another component?

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:

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

Upvotes: 3

Views: 10839

Answers (2)

Rahul Saini
Rahul Saini

Reputation: 222

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

Upvotes: 2

xadm
xadm

Reputation: 8418

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

Upvotes: 2

Related Questions