CODEWITHSUNDEEP
javascriptreactjs
Mark
Mark

Reputation: 11028

React how to link child component onClick to parent state

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?

Upvotes: 0

Views: 7249

Answers (5)

Pinki Gupta
Pinki Gupta

Reputation: 18

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

Upvotes: -1

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6684

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

Upvotes: 0

timmcliu
timmcliu

Reputation: 1879

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>

Upvotes: 1

Janick Fischer
Janick Fischer

Reputation: 636

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}

Upvotes: 1

Carlos de los reyes
Carlos de los reyes

Reputation: 1

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

Upvotes: 0

Related Questions