I am working with a react element that I need to hide when a button is clicked.
The styles for the element are set in the constructor like this:
constructor(props) {
super(props);
this.state = {
display: 'block'
};
this.ElementStyle= {
width: '100%',
backgroundColor: '#F6F6F6',
color: '#404040',
padding: '8px 15px',
boxSizing: 'content-box',
position: 'fixed',
bottom: '0',
display: this.state.display
}
}
The element contains a button inside its render() method which calls a function to change the state:
render() {
<button onClick={this.Method.bind(this)}>Click me </button>
}
Here is the Method():
Method() {
this.setState({
display: 'none'
});
}
Additionally, in the shouldComponentUpdate() method:
shouldComponentUpdate() {
this.ElementStyle.display = this.state.display;
}
However, running this code results in a
"TypeError: "display" is read-only"
error.