title: Hide component onClick using state with React
body: <p>I'm trying to hide StickyFooterDynamic onCLick. I've managed to hide it with css but I'd like to use React's state to completely remove it from the DOM onClick. Does anyone have a suggestion on how to do this? ES6 way.</p>
  
  <pre><code>class StickyFooterDynamic extends React.Component {
  constructor(props) {
  super(props);
  
  this.state = {
    visible: true,
  }
  }
  
  onClick() {
  this.setState(prevState =&gt; ({
    visible: !prevState.visible,
  }))
  }
  
  render() {
  
  if (!this.state.visible) {
    return null
  }
  
  const { url, service } = this.props;
  
  return (
    &lt;StickyFooter&gt;
      &lt;div className='sticky-footer-dynamic-wrapper'&gt;
        &lt;div className='main-content'&gt;
          &lt;div className='copy-wrapper'&gt;
            &lt;img className='sticky-footer-dynamic-img' alt='Repair Icon' src={iconRepair} /&gt;
            &lt;h3 className='sticky-footer-copy'&gt;Want a free quote for {service}?&lt;/h3&gt;
          &lt;/div&gt;
          &lt;a className='sticky-footer-dynamic-btn btn' href={url}&gt;GET&lt;i className="right-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href='#' className='sticky-footer-close' onClick={this.onClick}&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/StickyFooter&gt;
  );
  }
  }
  
  export default StickyFooterDynamic;
  </code></pre>