I want to create a button that will hide each ticket and one general button that will restore them all.

this is the Code:

return (
  <ul className="tickets">
    {filteredTickets.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>
        </footer>
      </li>
    ))}
  </ul>
);

CodePudding user response：

here is an example of what you want! you have to replace myFunction() for your button and myDIV into your element that you want to hide it!

<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) here is for button <button onlick={() =>setVisible(!visible)}>hide/show

CodePudding user response：

here is a demo in JS, modify to what you want exactly

<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`);
  });
});

CodePudding user response：

There is a good solution in your case but as mentioned in the comments, it needs to manipulate the filteredTickets array.

You need to add a property/value to each item of filteredTickets to track or change their state. For example, it can be isVisible property which is a boolean with false or true value.

Now, isVisible value will determine the behavior. let's modify the 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>
);

Explanation:

a new button added to each ticket and pass the handleHideTicket handler to it. If the user clicks on this button, the handler finds that ticket and sets the isVisible property to the false.

On the other hand, we can remove the hidden tickets by applying a simple filter method before map method. so only visible tickets will be displayed.

Now, create a general button to show all the tickets. In this case, you need a handler function that sets all ticket's isVisible value to 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 
}

Note: as I mentioned in the code's comments, you need to update your filteredTickets array after changing via handlers to reflect the changes in your elements.