title: Passing button click from child to parent in React
body: <p>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.</p>
  
  <p><strong>Parent component</strong></p>
  
  <pre><code>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 ( 
      &lt;div className = 'cancel'
        style = {{backgroundImage: `url(${this.props.backgroundImage})`}} &gt;
        &lt;div className = 'container' &gt; 
          {!this.state.isHidden &amp;&amp;
            &lt;CancelOffer { ...this.props}/&gt;
          }
  
          {this.state.isHidden &amp;&amp;
              &lt;CancelWarning { ...this.props}/&gt;
          }
  
          {this.state.isHidden &amp;&amp;
              &lt;button onClick = {this.toggleOffer.bind(this)} &gt; Click &lt; /button&gt;
          } 
        &lt;/div&gt; 
        &lt;/div&gt;
      )
    }
  }
  
  export default Cancel
  </code></pre>
  
  <p><strong>Child component</strong></p>
  
  <pre><code>import React from 'react'
  import SvgIcon from '../SvgIcon/SvgIcon'
  import './CancelWarning.scss'
  
  function CancelOffer (props) {
    const content = props.config.contentStrings
  
    return (
      &lt;div className='cancel-warning'&gt;
        &lt;h2 className='heading md'&gt;heading&lt;/h2&gt;
        &lt;p className='subpara'&gt;subheading&lt;/p&gt;
        &lt;div className='losses'&gt;
          &lt;ul&gt;
            &lt;li&gt;text&lt;/li&gt;
            &lt;li&gt;text&lt;/li&gt;
            &lt;li&gt;text&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
        &lt;div className='footer-links'&gt;
          &lt;a href='/member' className='btn btn--primary btn--lg'&gt;continue&lt;/a&gt;
          &lt;a href='/cancel' className='cancel-link'&gt;Cancel&lt;/a&gt;
          //NEED TO HAVE BUTTON HERE AND PASS PROPS TO PARENT TO TOGGLE VIEW
          {this.state.isHidden &amp;&amp;
          &lt;button onClick = {this.toggleOffer.bind(this)}&gt;Click&lt;/button&gt;
          } 
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default CancelOffer
  </code></pre>