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.