React how to link child component onClick to parent state

Question

I am creating a Modal component and on a high level, it looks like this:

class Modal extends Component {
    hideModal() {
        /* logic to hide modal */
    }       

    render() {
        return (
            <section role="dialog" ... >
                <div className="modal-inner">
                    <header className="react-modal-header">{this.props.title}</header>
                    <div className="react-modal-body">{this.props.body}</div>
                    <footer className="react-modal-footer">{this.props.footer}</footer>
                </div>
            </section>
        );
    }
}

I want to provide a way for consumers of this component to specify a button that closes the modal. I was thinking of putting this button in its own component like so:

class ModalCloseButton extends Component {
    render() {
        return (
            <button type="button" onClick={/* call hideModal in Modal component */}>
                {this.props.text}
            </button>
        );
    }
}

The Modal component and the ModalCloseButton component would be used this way:

<Modal
    title="my awesome modal"
    body="this is the body of my awesome component"
    footer={
        <ModalCloseButton text="Close modal!"/>
    } 
/>

How can I link the Modal and ModalCloseButton components so that the onClick handler in the button component triggers the hideModal function in the Modal component?

Possible Duplicate of [how-to-pass-data-from-child-component-to-its-parent-in-reactjs](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs/38397755#38397755) — Shubham Khatri, Mar 16 '18 at 16:51
It's different case - here data must be passed from Parent to element which is passed as prop to Parent (not from Child to Parent) — Bartek Fryzowicz, Mar 16 '18 at 17:04

Janick Fischer · Answer 1 · 2018-03-16T16:31:56.300

1

Take a look at this:

https://codepen.io/JanickFischr/pen/JLRovb

You can give the child a prop with a function.

onClick={this.props.function}

edited Mar 16 '18 at 16:31

answered Mar 16 '18 at 16:25

Janick Fischer

651
7
17

score 1 · Answer 2 · answered Mar 16 '18 at 16:32

Add a constructor function inside the parent:

constructor(props) {
  super(props)
  this.hideModal = this.hideModal.bind(this)
}

Then pass it into your child like so:

<ModalCloseButton hideModal={this.hideModal} />

Then in your child you can call it:

<button onClick={() => this.props.hideModal()}>click me</button>

score 0 · Answer 3 · answered Mar 16 '18 at 16:27

0

You can pass a callback function to the modal component and then pass that callback to the buttonClose component. When onClick you execute that callback, and receive the event from the parent

answered Mar 16 '18 at 16:27

Carlos de los reyes

1
2

Bartek Fryzowicz · Answer 4 · 2018-03-16T17:35:44.907

In Modal component you can extend passed Button element with additional prop holding reference to hideModal method using React.cloneElement:

class Modal extends Component {
    hideModal() {
        /* logic to hide modal */
    }       

    render() {
        const ButtonWithHide = React.cloneElement(this.props.footer, { hide: this.hideModal.bind(this)}));;
        return (
            <section role="dialog" ... >
                <div className="modal-inner">
                    <header className="react-modal-header">{this.props.title}</header>
                    <div className="react-modal-body">{this.props.body}</div>
                    <footer className="react-modal-footer">
                         <ButtonWithClose />
                    </footer>
                </div>
            </section>
        );
    }
}

and in Button component set passed method as onClick handler:

class ModalCloseButton extends Component {
    render() {
        return (
            <button type="button" onClick={this.props.hide}>
                {this.props.text}
            </button>
        );
    }
}

Pinki Gupta · Answer 5 · 2018-03-17T08:53:19.963

Add a state varible in modal(hide=true) and set visiblity of that modal on the basis of that modal. create a method hideModal() that toggle to the state variable in your Modal component, after that pass this method to the ModalCloseButton component as a props and call that method onClick of button in ModalCloseButton component.

class Modal extends Component { constructor(props){ super(props) this.state={ hide:true, } hideModal() { this.setState({ hide:false, }) }
render() { return ( {this.props.title} {this.props.body} {this.props.footer} {this.hideModal()}}/> ); } } class ModalCloseButton extends Component { render() { return ( {this.props.text} ); } }

React how to link child component onClick to parent state

5 Answers5