Creé algunas tarjetas a partir de una serie de objetos, ahora quiero mostrar datos emergentes para cada tarjeta de manera diferente. aquí está mi código de impresión
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}para esto, quiero el nombre de la tarjeta en el evento onClick, pero cuando paso algo en el handleClick reacciona arroja un error de demasiadas re-renderizaciones.
si hago el mismo evento onClick dentro del componente de la tarjeta y lo registro, imprime todos los nombres de las tarjetas uno por uno, esto es lo que hay dentro de la tarjeta:
function Card({single}) { const [flowName, setflowName] = useState(); const handleClick=(e)=>{ setflowName(e); return } console.log("loging name:",flowName); return ( <div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} > <div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg "> <div className="flex justify-between"> <div className="flex flex-row align-center"> </div> {single?.badge.map(badge=>( <div className={"badge"} key={badge}> <span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span> </div> ) )} </div> <div className="flex justify-center"> <img src={single?.image} alt={single?.flowName} /> </div> <div > <div className={"mt-2 flex justify-center"}> <h1>{single?.flowName}</h1> </div> </div> </div> </div> ) } export default CardSospecho que estás haciendo esto cuando intentas pasar un valor:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}Cada vez que se procesa, la función se invoca de inmediato, lo que provoca otro procesamiento y así sucesivamente...
La solución es envolver su llamada handleClick en otra función:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}