title: change css display block to none in React
body: <p>I am really new to React, and I have code set up like below, I want to click the button and make the content disappear.Wish someone could help me with this. I tried use state, but I did not get the results I want, I also tried <a href="https://jsfiddle.net/uwadhwnr/" rel="nofollow noreferrer">https://jsfiddle.net/uwadhwnr/</a> not work. I am really frustrating right now.</p>
  
  <pre><code>&lt;div id="content" style="height:1000px"&gt;
  
  &lt;script type="text/jsx"&gt;
  
  
  
  var styles = {
                  container: {
                    height: '100vh',
                    width: '100%',
                    backgroundColor: 'blue',
                  },
                  title: {
                    textAlign: 'center',
                  },
                modal: {
                  display: 'block',
                  position: 'fixed',
                  zIndex: '1',
                  paddingTop: '100px',
                  left: '0',
                  top: '0',
                  width: '100vw',
                  height: '100vh',
                  overflow: 'auto',
                  backgroundColor: 'rgb(0,0,0)',
                  backgroundColor: 'rgba(0,0,0,0.4)',
              },
                modalContent: {
                        position: 'relative',
                        backgroundColor: '#fefefe',
                        margin: 'auto',
                        padding: '0',
                        border: '1px solid #888',
                        width: '80vw',
  
  
                    },
                    modalHeader: {
                      padding: '2px 16px',
                      backgroundColor: '#5cb85c',
                      color: 'white',
                  },
  
                  modalBody: {padding: '2px 16px'},
  
                  modalFooter: {
                      padding: '2px 16px',
                      backgroundColor: '#5cb85c',
                      color: 'white',
                  },
                  upload: {
                    position: 'absolute',
                    right: '5%',
                    top: '5%',
                  },
              };
  
  
  
              var PopUp = React.createClass({
                render: function() {
                  return (
                    &lt;div&gt;
                    &lt;i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}&gt;&lt;/i&gt;
                    &lt;div id="myModal" className="modal" style={styles.modal}&gt;
  
  
                    &lt;div className="modal-content" style={styles.modalContent}&gt;
                      &lt;div className="modal-header" style={styles.modalHeader}&gt;
                        &lt;h2&gt;Modal Header&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;div classN="modal-body" style={styles.modalBody}&gt;
                        &lt;p&gt;Some text aa the Modal Body&lt;/p&gt;
                        &lt;p&gt;Some other text...&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className="modal-footer" style={styles.modalFooter}&gt;
                        &lt;h3&gt;Modal Footer&lt;/h3&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
                  );
                }
              });
  
  
              var FilterableProductTable = React.createClass({
                render: function() {
                  return (
                    &lt;div&gt;
                      &lt;PopUp /&gt;
  
                    &lt;/div&gt;
                  );
                }
              });
  
      React.render(
        &lt;FilterableProductTable  /&gt;,
        document.getElementById('content'));
  &lt;/script&gt;
  </code></pre>
  
  <p></p>