0
I’m making a kind of list where when I click anywhere the desired item is to appear information only from the one I clicked, but the way I did is changing the variable "open" globally, then the information will appear on all of the list even if I just click on one item.
The correct one then was to send the item id as parameter to the function that will show and hide the information, but I have no idea how to implement this to make a function return the open variable as true or false only to a list element.
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>
)
}
In the above code there is only one item but it is to shorten so that you can analyze, then I will make the connection with the back and call the function map to go through the whole array of the query.