How to call a component method from another component?

Question

I have a header component that contain a button and I want this button to display another component(modal page) when it\'s clicked.

Can I do something like this:

Answer 1

More like this:

class Header extends React.Component {
    constructor(props) {
        super(props)
    }

    props: {
        user: User
    }

    render() {
        return (
             this.refs.componentToDisplay.showMe()}>
            
        )
    }
}

Being sure to expose a showMe() method on your child component:

class ComponentToDisplay extends React.Component {

    showMe() {
        this.refs.simpleDialog.show();
    }

    render() {
        return (
            

                
                    {"Text inside the modal."}
                     this.refs.simpleDialog.hide()}>{"Close modal"}
                
            
        )
    }
}

Basically, what's going on here is you wrap the SkyLight's show() method in your child component's own method (in this case, showMe()). Then, in your parent component you add a ref to your included child component so you can reference it and call that method.