title: React hook's state using event to target a specific div
body: <p>I'm new to coding and react and i'm trying to update x4 divs so when the user clicks it will update the content inside. Currently i have the code updating however it updates all 4 div's instead of the specific div which is clicked.</p>
  <p>I know this will be controlled by using event however slightly confused what exactly i need to include.</p>
  <p>Any help in the correct direction would be greatly appreciated. Current code runs fine but content within all 4 divs update rather than the specific one which is clicked</p>
  <pre><code>  const [isActive, setIsActive] = useState(false)
  
    const toggleContent = e =&gt; {
      e.preventDefault()
      setIsActive(!isActive)
    }
  </code></pre>
  <p>Example div i'm trying to update when user clicks (currently i have x4 others which are the same logic but different HTML content. Currently when any of the 4 buttons are clicked, all x4 divs content change however i only want it to change the specific div which contained the button that was clicked</p>
  <pre><code>              {!isActive ?
                  &lt;article&gt;
                      &lt;h1&gt;BEFORE CLICK TEXT&lt;/h1&gt;
                        &lt;a onClick={toggleClass}&gt;BUTTON&lt;/a&gt;
                  &lt;/article&gt;
                  :
                  &lt;article&gt;
                        &lt;p&gt;AFTER CLICK TEXT&lt;/p&gt;
                        &lt;a onClick={toggleClass}&gt;Back&lt;/a&gt;
                  &lt;/article&gt;
                }
  </code></pre>