CODEWITHSUNDEEP
reactjscomponentsreact-props
geeberry
geeberry

Reputation: 675

Passing down React Components dynamically through props?

I'm looking for a solution. I have a Sidebar component that needs to render a different component based on which button in the parent component is pressed. I'm unsure of the best way to approach this problem, or if its possible. Heres my React code:

Parent Component

The content prop on the Sidebar component needs to pass down different components based on which Button components are clicked (so the first Button would pass a component in the content prop, and the second would pass down a component etc).

 return (
            <Fragment>
                <Sidebar
                    isOpen={this.state.menuOpen}
                    content={<Filters />}
                    />
                <PanelWrapper>
                    <IconContainer>
                       <Button />
                       <Button />
                    </IconContainer>
                </PanelWrapper>
              </Fragment>

)

Child Component

And here that content prop would be rendered:

class Sidebar extends Component {
    render() {
        return (
            <Menu
                customBurgerIcon={ false }
                noOverlay
                isOpen={this.props.isOpen}
            >
            {this.props.content}
            </Menu>
        )
    }
}

Thank you

Upvotes: 0

Views: 54

Answers (1)

Niall Moore
Niall Moore

Reputation: 138

Rather than passing a component as props, I'd probably do it something like this

class Sidebar extends Component {
    render() {
        return (
            <Menu
                customBurgerIcon={ false }
                noOverlay
                isOpen={this.props.isOpen}
            >
            {switch(this.props.content) {
                case("type1"): <mycomponent1 />
                ...
            }}
            </Menu>
        )
    }
}

Upvotes: 1

Related Questions