Show and hide only the desired widget

Question

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.

Answer 1

Imagine that each state change demonstrates how your entire component will be displayed. If you follow this reasoning you will reach the following conclusion:

"If I have a component (Home) that has a list of items (consider the list size as x) and for each item I can display a Collapse showing its details, my component should have a state amount of at least the size of x."

In other words, every change in what is seen in Home represents a state of the component. If you have an item list and each item can change its appearance, it means that the component Home must have sufficient states for all items.

This is totally sendable.

However, you can separate a little more your code so that each item is within its own component. Thus, the Home component does not need to worry about the Collapse states of each item. In fact, each item needs to worry about its own Collapse state. Sacks?

Let me show you.

function Home(){
  return (lista.map(item => <Item item={item}/>));
}
function Item({item}) {
  const [open, setOpen] = useState(false); //começa como não aberto
  return <div>{item.nome}{open && <span>mais informações do item {item.nome} }</span></div>
}

Take a good look at that code. Each item now has the responsibility to give your own Ollapse and you exempt the Home component from controlling everyone’s state.

I hope it helped.

Any doubt comments this post.