Passing button click from child to parent in React - reactjs

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

Answer 1

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