title: React js, why doesn't my component re-render when I change the value of open?
body: <p>I have a component that renders perfectly the first time, but no changes to the passed in variables will affect anything, even though passing in true or false for open seems to always work fine. Why doesn't this work?</p>
  
  <pre><code>const ChatWindow = ({ open, prevContent }) =&gt; {
  
    var content = prevContent.messages.map(message =&gt; (
            &lt;Message player={message.player} text={message.text} /&gt;));
  
    const openClose = () =&gt; {
      if(open){
        open = false;
      } else {
        open = true;
      }
      console.log(open);
    }
  
  
  
    return (
      &lt;div className="ChatWindow"&gt;
        &lt;div className="openWindow" onClick={() =&gt; openClose()}&gt;{open ? "X" : "O"}&lt;/div&gt;
  
        &lt;div className="Content"&gt;
          {content}
        &lt;/div&gt;
  
        &lt;style jsx&gt;{`
         .ChatWindow {
            opacity: ${open ? "1.0" : "0.3"};
          }
          .Content {
            max-height: ${open ? "400px" : "0px"};
            opacity: ${open ? "1.0" : "
            overflow-y: ${open ? "scroll" : "hidden"};
          }
        `}&lt;/style&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>