title: onClick of button triggering all the components to open - Reactjs
body: <p>I implemented a Card component and basically generating a bunch of cards on some input data. I binded a setter function on button click on every card which basically expands and collapse it. Even after putting unique keys to the div is sort of triggering all the cards to open at once.</p>
  <p>Here is the code piece:</p>
  <pre><code>import React, { useState } from 'react';
  
  import PrettyPrintJson from './PrettyPrintJson';
  import './Card.scss';
  import '../App.scss';
  
  const Card = (props) =&gt; {
      const { data } = props;
      const [collapse, toggleCollapse] = useState(true);
  
      return (&lt;div className=&quot;card-group&quot;&gt;
      {data.map((obj, idx)=&gt;{
          return &lt;div className=&quot;card&quot; key={`${idx}_${obj?.lastModifiedOn}`}&gt;
          &lt;div className=&quot;card-header&quot;&gt;
              &lt;h4 className=&quot;card-title&quot;&gt;{`fId: ${obj?.fId}`}&lt;/h4&gt;
              &lt;h6 className=&quot;card-title&quot;&gt;{`name: ${obj?.name}`}&lt;/h6&gt;
              &lt;h6 className=&quot;card-title&quot;&gt;{`status: ${obj?.status}`}&lt;/h6&gt;
              &lt;div className=&quot;heading-elements&quot;&gt;
                  &lt;button className=&quot;btn btn-primary&quot; onClick={() =&gt; toggleCollapse(!collapse)}&gt;Show Json&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className={`card-content ${!collapse ? 'collapse show' : 'collapsing'}`}&gt;
              &lt;div className=&quot;card-body&quot;&gt;
                  &lt;div className=&quot;row&quot;&gt;
                  &lt;PrettyPrintJson data={ obj } /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      })}
      &lt;/div&gt;
      );
  }
  
  export default Card;
  </code></pre>