This is a list of services that are marked as complete and disappear after being marked.
I have the following piece of code for my component. When the user clicks the 'Finished' button, the class changes (first to 'booking-complete') and so does the colour of the component. After half a second, the component is also hidden ('hide' class is added.).
const Booking = (props) => {
let { hidden } = useContext(ContextBooking)
let completed = props.completed
return (
<li
className={
isCompleted && isHidden
? 'booking-complete hide'
: isCompleted
? 'booking-complete'
: 'booking'
}}
key={props.id}
id={props.id}
>
<h3>{props.date}</h3>
<h4>{props.time}</h4>
<h5>{props.name}</h5>
</li>
)
}
<button
onClick={() => {
if (!isCompleted && !isHidden) {
setIsCompleted(!isCompleted); //adds 'booking-complete' and change colour
setTimeout(() => setIsHidden(!isHidden), 500) //adds 'hide' class to component and 'display: none'
else if (isCompleted && !isHidden) {
setIsCompleted(!isCompleted);
}
else {
setIsCompleted(!isCompleted);
setIsHidden(!isHidden);
}
}}>
{!isCompleted ? `Completed` : `Not completed`}
</button>
In another component, I am creating multiple 'Booking' components.
My objective now is to, when clicking the 'Show hidden' button (see below), ALL of the components that were hidden before (the ones with the 'hide' class, as per above) should appear again (I guess just removing the 'hide' class would work, but how to do that?)
const DisplayBookings = () => {
const display = (day) => allBookings.map(item =>
item.day === day &&
<Booking
completed={item.completed}
key={item.id}
id={item.id}
time={item.time}
name={item.name}
date={item.date}
/>
)
<button
onClick={() =>
//how to make this button remove the 'hide' class of all <Booking /> components that have it
//but still show components as 'completed' and other as not?
}>
Show hidden
</button>
Assuming that hidden
can receive True or False, you could do like this:
const [hide, setHide] = useState(false);
hideHandler = () => {
setHide(!hide);
};
Then in your jsx tag that have the hidden
property, you could do like this:
<element hidden={hide} />
Let me know if hidden property can receive True or False like the code above.
hide-hidden
to the wrapper of <Booking />
list and apply the style.hide-hidden li.hidden { display: none }
then you can add the class conditionally
const DisplayBookings = () => {
const [showHidden, setShowHidden] = useState(false)
//..
return (
//...
<ol className={!showHidden && 'hide-hidden'}>
{/* ... Booking list ... */}
</ol>
<button onClick={() => setShowHidden(true)}>
Show hidden
</button>
//...
)
}
showHidden
state to Booking
as a prop <Booking showHidden={showHidden} {...otherProps} />
and inside Booking
add hidden
class to <li />
only when props.showHidden && hidden == true
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.