change css display block to none in React - css

Question

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 https://jsfiddle.net/uwadhwnr/ not work. I am really frustrating right now.
<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>

Answer 1

What's the difficult in that?
Just setup a CSS class with this property:
display: none
and switch the class by setting a new state on button click.
Here's an example: https://jsfiddle.net/8aoue71m/