title: Trying to change a square's visibility with props
body: <p>I have a very basic program that is supposed to hide a square when I button is pressed. Within the Game component, it seems to be updating fine whenever I press the button, and sends an alert whenever I press the button with the current visibility. But when I try to update the square's visibility, it doesn't work.</p>
  <pre><code>import React from &quot;react&quot;; import ReactDOM from &quot;react-dom&quot;; import &quot;./index.css&quot;;
  
  function Square(props) {
      return (
          &lt;div className=&quot;square&quot; style={{ visibility: props.visibility }}&gt;&lt;/div&gt;
      ); }
  
  function Button(props) {
      return (
          &lt;button type=&quot;button&quot; onClick={props.onClick}&gt;
              Click to hide square!
          &lt;/button&gt;
      ); }
  
  class Game extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              visibility: &quot;visible&quot;,
          };
      }
      handleClick() {
          this.setState({
              visibility:
                  this.state.visibility == &quot;visible&quot; ? &quot;hidden&quot; : &quot;visible&quot;,
          });
          alert(this.state.visibility);
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;Button
                      onClick={() =&gt; this.handleClick()}
                      visibility={this.state.visibility}
                  /&gt;
                  &lt;Square /&gt;
              &lt;/div&gt;
          );
      } }
  
  ReactDOM.render(&lt;Game /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>