Tenho com array de objetos, onde cada objeto se transforma em um card. Ao dar um map e usar o onClick, quando clico no botão de um card, o onclick é ativado em todos os outros cards. Eu queria que ao clicar em um item, só ativasse o onclick desse.
meu código abaixo:
<ul className="projetos-container">
{DataProjetos.map((projeto, index) =>
{
return(
<li key={index} >
<img src={projeto.img} onClick={show} />
{ showdisplay &&
<div className="saiba-mais-card" >
<button onClick={hide}><AiOutlineClose /></button>
<div>
<h1>{projeto.saiba}</h1>
<p>{projeto.tecnologia}</p>
</div>
</div>
}
<div className="buttons">
<button onClick={show}><BsInfoSquare /></button>
<div>
<a href={projeto.acessar} target="_blank">
<button><FaExternalLinkAlt /></button>
</a>
</div>
<div>
<a href={projeto.repositorio} target="_blank">
<button><FaGithub /></button>
</a>
</div>
</div>
</li>
)
})}
</ul>
já tentei fazer onClick={() => show(index)} e não deu certo também.