aquí hay un ejemplo de lo que quieres! ¡Tienes que reemplazar myFunction() por tu botón y myDIV en tu elemento que deseas ocultar!

 <button onclick="myFunction()">Click Me</button> function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

for react = const [visible, setVisible] = useState(true) aquí está el botón <button onlick={() =>setVisible(!visible)}>hide/show

aquí hay una demostración en JS, modifique a lo que quiere exactamente

 <ul class="ticket"> <li> <p>hey, I'm a P</p> <div class="data">I'm a Div</div> </li> </ul> .hide {display:none} const generalBtn = document.getElementById(`btn`); const divContainer = document.querySelector(`.ticket`); const eachDiv = divContainer.getElementsByClassName(`data`); generalBtn.addEventListener(`click`, () => { [...eachDiv].forEach((div) => { div.classList.toggle(`hide`); }); });

Hay una buena solución en su caso, pero como se menciona en los comentarios, necesita manipular la matriz filteredTickets .

Debe agregar una propiedad/valor a cada elemento de filteredTickets para rastrear o cambiar su estado. Por ejemplo, puede ser la propiedad isVisible , que es un booleano con valor false o true .

Ahora, el valor de isVisible determinará el comportamiento. modifiquemos el ticket:

 const handleHideTicket = (id) => { // find selected ticket and ​change its visibility ​const updatedFilterdTickets = filteredTikcets.map(ticket => (ticket.id === id ? {...ticket, isVisible: false} : ticket)) // now the updatedFilterdTickets need to be set in your state or general state like redux or you need to send it to the server throw a API calling. } return ( ​<ul className="tickets"> ​{filteredTickets.filter(ticket => ticket.isVisible).map((ticket) => ( ​<li key={ticket.id} className="ticket"> ​<h5 className="headline">{ticket.headline}</h5> ​<p className="text">{ticket.text}</p> ​<footer> ​<div className="data"> ​By {ticket.address} | {new Date(ticket.time).toLocaleString()} ​</div> // add a button to control visibility of each ticket ​<button onClick={() => handleHideTicket (ticket.id)}> click to hid / show </button> ​</footer> ​</li> ​))} ​</ul> );

Explicación:

un nuevo button agregado a cada ticket y pasarle el manejador handleHideTicket . Si el usuario hace clic en este botón, el controlador encuentra ese ticket y establece la propiedad isVisible en false .

Por otro lado, podemos eliminar los tickets ocultos aplicando un método de filter simple antes del método de map . por lo que solo se mostrarán los boletos visibles.

Ahora, crea un botón general para mostrar todos los boletos. En este caso, necesita una función de controlador que establezca el valor isVisible de todos los tickets en true

 const handleShowAllTickets = () => { const updatedFilteredTickets = filteredTickets.map(ticket => ({...ticket, isVisible: true})) // now put the updatedFilteredTickets in your general store/post an API call/ update state }

Nota: como mencioné en los comentarios del código, debe actualizar su matriz de filteredTickets después de cambiar a través de los controladores para reflejar los cambios en sus elementos.