如何显示隐藏的组件？

Question

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>

Answer 1

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.

Answer 2

1. You can put another class like 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>
    //...
  )
}

2. Or you can pass 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