if we move the isHeaderHidden property out of the state object, then we'll break the interactivity of our component, because the render() method will not be triggered automatically by React every time that a user clicks on our button anymore. This is an example of broken interactivity, but why I can't simple invoke it by myself?

class ReactClass extends Component { state = {} isHeaderHidden = false handleClick = () => { this.isHeaderHidden = !this.isHeaderHidden; this.render(); //!!!!!!! } render() { if (this.isHeaderHidden) { return ( <button className = "btn ban-default" onClick = {this.handleClick} > Toggle Header < /button> ); } return ( <div> <h1 className="header">Stateful React Component</h1> < button className = "btn ban-default" onClick = { this.handleClick } > Toggle Header < /button> </div > ); } }