title: how can I keep track of the selected div , and update overview component?
body: <p>I am trying to build a component where the component can automatic adds a class to <code>overview-card</code> to remove 70% , and adds a margin to <code>job-explain</code>, but on the other hand I want if the first overview is active , and  <code>job-explain</code> is open then just update <code>job-explain</code>with the content from the div</p>
  <pre><code>const FeedView = () =&gt; {
      const [showResults, setShowResults] = useState(false);
      const onClick = (e) =&gt; setShowResults(!showResults);
      const [selected, setSelected] = useState(null);
  
      return (
          &lt;&gt;
          {feed.map(post =&gt; 
              &lt;div className={`${showResults ? &quot;job-card overview-card job-overview-card-70-minus&quot; : &quot;job-card overview-card&quot;}`} key={makeid()} onClick={onClick}&gt;
              &lt;/div&gt;
              &lt;div className={`${showResults ? &quot;job-explain job-explain-visibility&quot; : &quot;hidden&quot;}`} &gt;
                  update content here if already open the first overview-card
              &lt;/div&gt;
        )}
        &lt;/&gt;
      )
  </code></pre>