Esto fazendo um tipo de lista em que quando clico em qualquer lugar do item desejado é para aparecer informações apenas daquele que cliquei, porém do jeito que fiz está mudando a variável "open" globalmente, então as informações vai aparecer em todos da lista mesmo que eu clique apenas em um item.
O correto então era eu enviar o id do item como parâmetro para a função que vai mostrar e esconder as informações, porém não faço ideia de como implementar isso para fazer com que uma função retorne a variável open como true ou false apenas para um elemento da lista.
function Home() {
const [open, setOpen] = useState(false)
if (open == false) { var classeBar = 'collapsed' }
else {var inBar = 'in' }
return (
<div>
<ContentHeader title='Meus Projetos' />
<Content>
<div className={classeBar}>
<div className='list-proj ponteiro' onClick={() => setOpen(!open)} data-toggle="collapse" data-target="#id1" aria-expanded={open} aria-controls='id1'>
<div className='col-md-9 col-xs-12'>
<div className='alinhar'>
<h2 className='title-proj'>Mouse com pendrive</h2>
<div className='lider-e-orien'>
<span>Lider: Chris <br />
Orientador: Ander</span>
</div>
</div>
<br />
<div>
<span className='separador'></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi maiores culpa consequuntur explicabo consectetur repellendus optio inventore laudantium? Quas totam ullam a perspiciatis ea dolores doloribus iste exercitationem, neque eligendi.</p>
</div>
</div>
<div className='status-proj col-md-3'>
<div>
<h3>Status</h3>
</div>
<div>
<span className='status-color'>Em aprovação</span>
</div>
</div>
</div>
<div id='id1' className={`collapse ${inBar}`} aria-expanded={open}>
<div className='col-md-6'>
<h3>oi</h3>
</div>
<div className='col-md-6'>
<h3>oi</h3>
</div>
</div>
</div>
</Content>
</div>
)
}
No código acima há apenas um item mas é para encurtar para que vocês possam analisar, depois vou fazer a conexão com o back e chamar a função map para percorrer todo o array da query.