1

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.

1
  • Olá, qual state está sendo atualizado no show/hide? tem algum state separado do DataProjetos ou você quer atualizar no DataProjetos?
    – user201180
    1/10/2022 às 15:44

1 Resposta 1

2

A meu ver com o exemplo do código, você tenta atualizar todo o State do showdisplay, e afirmou ter tentando com Index. É possível fazer isto numa lista, mas você teria que manter/criar outra estrutura para lembrar o que foi alterado em DataProjetos.

Como estamos lidando com React, este é um problema que pode ser resolvido do modo mais ReactJS possível que é componetizando, ou seja, isolando a interface do item da lista em um componente funcional.

function ProjetosItem({ projeto }) {
  const [display, setDisplay] = useState(false);
  
  return (
    <li>
      <img src={projeto.img} onClick={() => setDisplay(true)} />

      { display && 
        <div className="saiba-mais-card"  > 
          <button onClick={() => setDisplay(false)}><AiOutlineClose /></button>

          <div>
              <h1>{projeto.saiba}</h1> 
              <p>{projeto.tecnologia}</p>
          </div>

        </div>
      }

      <div className="buttons">

        <button onClick={() => setDisplay(true)}><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>
  );
}

De outro modo o React iria precisar renderizar toda lista novamente, já assim isolado e com um State único para o show/hide, só vai acontecer o update do mesmo, mantendo a lista original intacta.

 <ul className="projetos-container">

   {DataProjetos.map((projeto, index) => <ProjetosItem key={index} projeto={projeto} />)}
   
</ul>

1
  • Muito obrigado, resolveu o meu problema, e ainda melhor: me fez aprender de verdade! 1/10/2022 às 18:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .