title: Manipulating dom elements dynamically in react?
body: <p>I am trying to have a button change color when the user clicks it in React. Each button I am trying to add this functionality to is also updating state. How can I interact with styles AND update state when these buttons are clicked? Here's my crude attempt:</p>
  <p>Some HTML:</p>
  <pre><code>&lt;div className=&quot;searchPrivacyContainer&quot;&gt;
              &lt;p&gt;USERS CAN SEARCH FOR MY PROJECT:&lt;/p&gt;
              &lt;div className=&quot;searchPrivacySelect&quot;&gt;
                &lt;div
                  className=&quot;searchPrivacyYes&quot;
                  onClick={
                    (holdColor,
                    function () {
                      setProposal({ ...proposal, searchable: true });
                    })
                  }
                &gt;
  </code></pre>
  <p>And this is the most basic version of the function I'm trying to bind. Writing the body of the function should be the straightforward part hopefully, I just don't know how to bind it to the div which is already calling another function:</p>
  <pre><code>const holdColor = (event) =&gt; {
      console.log(event.target.style);
    };
  </code></pre>