title: take out name of dynamically created cards react
body: <p>I had created some cards from an array of objects, now I want to show popup data for each card differently.
  here is my code of printing</p>
  <pre><code>{data.carData.map( single=&gt;(&lt;li&gt;{ &lt;div  onClick={handleClick}&gt;&lt;Card single={single}/&gt;&lt;/div&gt;} &lt;/li&gt;))}
  </code></pre>
  <p>for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.</p>
  <p>if I do the same onClick event inside the card component and log it prints all the cards names one by one
  here is what is inside the card:</p>
  <pre><code> function Card({single}) {
  const [flowName, setflowName] = useState();
  const handleClick=(e)=&gt;{
      setflowName(e);
      return
  }
  console.log(&quot;loging name:&quot;,flowName);
  return (
           &lt;div className=&quot;main mb-2 z-0&quot; onClick={handleClick(e=&gt;single?.flowName)} &gt;
         &lt;div  className=&quot; inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg &quot;&gt;
             &lt;div className=&quot;flex justify-between&quot;&gt;
                 &lt;div className=&quot;flex flex-row align-center&quot;&gt;
  
                 &lt;/div&gt;
                
                     {single?.badge.map(badge=&gt;(
  
                         &lt;div className={&quot;badge&quot;} key={badge}&gt;
                         &lt;span className={badge===&quot;Growth&quot;?&quot; badgeClrG&quot;:(badge===&quot;Content&quot;?&quot;content&quot;:&quot;badgeClrO&quot;)} key={badge}&gt;{badge}&lt;/span&gt;
                         &lt;/div&gt;
                     )    )}
                     
             &lt;/div&gt;
             &lt;div className=&quot;flex justify-center&quot;&gt;
             &lt;img src={single?.image} alt={single?.flowName} /&gt;
             &lt;/div&gt;
             &lt;div &gt;
                 &lt;div className={&quot;mt-2 flex justify-center&quot;}&gt;
                     &lt;h1&gt;{single?.flowName}&lt;/h1&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;            
  
  )   }   export default Card
  </code></pre>