Erro no uso do map com json | React parte 2: Validação, Rotas e Integração com API

Vi uma coisa no curso e tentei aplicar em outro projeto sem sucesso, embora seja algo diferente o contexto é o mesmo. Tenho um componente que inicialmente só exibe uma imagem e ao clicar num botão exibe mais informações vindas de um json. Meu problema é que há um map trazendo 6 itens e os exibe, mas ao clicar num botão ao invés de mostrar apenas o conteúdo daquele item está mostrando de todos itens. Acho que eu deveria fazer algo com o index, mas não estou conseguindo. Segue o meu componente:

return(

    <>
      <div className='jobs'>
        <div className='container'>
          <div className='wraper'> 

            {data.map((item, index) => (

            <div onClick={evt => handleCurrentItem(evt, index)} className='teste'>

              <img src={imagemPortfolio(item.image)} className='img-fluid' />

              <p className='more' onClick={() => setShowItems(!showItems)} title='Ver o projeto'>{ showItems ? '-' : '+' }</p>
              {console.log(item)}

              {showItems && 
                <div className='bg-content-job'>

                  <h2 className='mb-3 title'>
                    {item.title}
                  </h2>

                  <p className='mb-3 description'>
                    {item.description}
                  </p>

                  <p className='tecnology'>
                    Tecnologia: {item.framework}
                  </p>

                  <p className='text-link mt-5 text-link'>
                    <a href={item.link} title={item.title}>visitar</a>
                  </p>

                </div>
              }

            </div>


              ))
            }

          </div>
        </div>
      </div>
    </>
  )

E aqui o json:

[

  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  },
  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  },
  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  },
  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  },
  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  },
  {
    "title": "Nome da Empresa",
    "description": "Nome do Projeto",
    "image": "./image-01.png",
    "framework": "WordPress",
    "link": "https://www.site.com.br",
    "target": "blank" 
  }

]

Fala ai Afrânio, tudo bem? Esse problema poderia ser resolvido de N maneiras, nesse momento minha sugestão seria você adicionar o index do item atual ativo e depois verificar com um if se deve expandir as informações do item ou não.

Exemplificando seria algo assim:

const Itens = () => {
    const [itens, updateItens] = useState([])
    const [itemAtivo, updateItemAtivo] = useState()
    return (
        <ul>
            { itens.map((item, index) => (
                <li>
                    <button onClick={() => updateItemAtivo(index)}>Expandir</button>
                    { itemAtivo === index ? <h1>Expandido</h1> : null }
                </li>
            )} 
        </ul>
    )
}

A ideia seria mais ou menos essa.

Pode ser que tenha algum problema de sintaxe porque não testei esse código.

Espero ter ajudado.

Mergulhe em programação