title: onClick not working when I attempt to change value of variable
body: <p>In React, I'm attempting to change the display of 2 elements when certain buttons are clicked on. I either want the title displayed, or an input to edit the title. My title div has a className of a variable named 'titleDisplay' with the value of 'isDisplayed'. I have a function set up to switch it to 'notDisplayed'</p>
  <pre><code>let titleDisplay = 'isDisplayed';
  let editDisplay = 'notDisplayed';
  const editDisplayed = () =&gt; {
          editDisplay = 'isDisplayed'
          titleDisplay = 'notDisplayed'
      }
  </code></pre>
  <pre><code>&lt;button onClick={editDisplayed} id=&quot;edit-btn&quot;&gt;EDIT&lt;/button&gt;
  </code></pre>
  <pre><code>&lt;div className={titleDisplay}&gt;
     &lt;h2 className='indieNotebookTitle'&gt;{notebook?.title}&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.isDisplayed {
      display: block;
  }
  
  .notDisplayed {
      display: none;
  }
  </code></pre>
  <p>Not sure what I'm doing wrong since onClick has been working with functions up until now.</p>