Passing button click from child to parent in React

Question

While trying to toggle between two child components, I need to have the trigger button in the child component, and pass the click function through the child component to the in order to toggle the other child component. I'm not sure how to push the props from the child to the parent in order to trigger the toggle.

Parent component

import React from 'react' import CancelOffer from '../CancelPages/CancelOffer' import CancelWarning from '../CancelPages/CancelWarning' class Cancel extends React.Component { constructor() { super() this.state = { isHidden: true } } toggleOffer() { this.setState({ isHidden: !this.state.isHidden }) } render() { return ( <div className = 'cancel' style = {{backgroundImage: `url(${this.props.backgroundImage})`}} > <div className = 'container' > {!this.state.isHidden && <CancelOffer { ...this.props}/> } {this.state.isHidden && <CancelWarning { ...this.props}/> } {this.state.isHidden && <button onClick = {this.toggleOffer.bind(this)} > Click < /button> } </div> </div> ) } } export default Cancel

Child component

import React from 'react' import SvgIcon from '../SvgIcon/SvgIcon' import './CancelWarning.scss' function CancelOffer (props) { const content = props.config.contentStrings return ( <div className='cancel-warning'> <h2 className='heading md'>heading</h2> <p className='subpara'>subheading</p> <div className='losses'> <ul> <li>text</li> <li>text</li> <li>text</li> </ul> </div> <div className='footer-links'> <a href='/member' className='btn btn--primary btn--lg'>continue</a> <a href='/cancel' className='cancel-link'>Cancel</a> //NEED TO HAVE BUTTON HERE AND PASS PROPS TO PARENT TO TOGGLE VIEW {this.state.isHidden && <button onClick = {this.toggleOffer.bind(this)}>Click</button> } </div> </div> ) } export default CancelOffer

Denys Kotsur · Accepted Answer · 2018-04-20 18:50:08Z

You can just pass it like regular param. Also, you can use arrow functions instead of binding.

Parent component

import React from 'react' import CancelOffer from '../CancelPages/CancelOffer' import CancelWarning from '../CancelPages/CancelWarning' class Cancel extends React.Component { constructor() { super() this.state = { isHidden: true } this.toggleOffer = this.toggleOffer.bind(this); } toggleOffer() { this.setState({ isHidden: !this.state.isHidden }) } render() { const { isHidden } = this.state return ( <div className = 'cancel' style = {{backgroundImage: `url(${this.props.backgroundImage})`}} > <div className = 'container' > {!isHidden && <CancelOffer toggleOffer={this.toggleOffer} isHidden={isHidden}/> } {isHidden && <CancelWarning toggleOffer={this.toggleOffer} isHidden={isHidden}/> } {isHidden && <button onClick = {this.toggleOffer}> Click </button> } </div> </div> ) } } export default Cancel

Child component

import React from 'react' import SvgIcon from '../SvgIcon/SvgIcon' import './CancelWarning.scss' function CancelOffer (props) { const content = props.config.contentStrings return ( <div className='cancel-warning'> <h2 className='heading md'>heading</h2> <p className='subpara'>subheading</p> <div className='losses'> <ul> <li>text</li> <li>text</li> <li>text</li> </ul> </div> <div className='footer-links'> <a href='/member' className='btn btn--primary btn--lg'>continue</a> <a href='/cancel' className='cancel-link'>Cancel</a> {props.isHidden && <button onClick = {props.toggleOffer}>Click</button> } </div> </div> ) } export default CancelOffer

The arrow function is throwing a syntax error unexpected token toggleOffer = () => {this.setState({isHidden: !this.state.isHidden})}
@Matt probably, you don't have such babel plugin called "transform-class-properties". I'll rewrite the code with bind syntax but I'd recommend you to use this further.
@Matt I've changed toggleOffer to regular function and added binding in the constructor. Try again.

Collectives™ on Stack Overflow

Passing button click from child to parent in React

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related