リアクションでCSSの表示ブロックをnoneに変更

私は本当にリアクションに新しいですし、以下のようにコードを設定しました。ボタンをクリックしてコンテンツを消したいと思っています。私は使用状態を試しましたが、私が望む結果を得られなかった、私はまた試みたhttps://jsfiddle.net/uwadhwnr/は動作しません。私は今、本当にイライラしています。リアクションでCSSの表示ブロックをnoneに変更

<div id="content" style="height:1000px"> 

<script type="text/jsx"> 



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 (
        <div> 
        <i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}></i> 
        <div id="myModal" className="modal" style={styles.modal}> 


        <div className="modal-content" style={styles.modalContent}> 
        <div className="modal-header" style={styles.modalHeader}> 
         <h2>Modal Header</h2> 
        </div> 
        <div classN="modal-body" style={styles.modalBody}> 
         <p>Some text aa the Modal Body</p> 
         <p>Some other text...</p> 
        </div> 
        <div className="modal-footer" style={styles.modalFooter}> 
         <h3>Modal Footer</h3> 
        </div> 
        </div> 
        </div> 
        </div> 
       ); 
       } 
      }); 


      var FilterableProductTable = React.createClass({ 
       render: function() { 
       return (
        <div> 
        <PopUp /> 

        </div> 
       ); 
       } 
      }); 

    React.render(
     <FilterableProductTable />, 
     document.getElementById('content')); 
</script>

出典

2017-08-06 Greg