More data!

First, I add more data to my database. Just to make things more realistic. For each cinema I add a subcollection movies in which I add some movies. Each movie has this info

name: string,
runtime: string,
genre: string,
release_date: timestamp

In Firestore, data can also have different structure (NoSQL's power!) but, for simplicity, I follow the canonical way.

I add one movie for the first cinema and two movies for the second one.

Fetching the subcollection

I make the cinemas list clickable, so when I click an item I load movies scheduled for that specific cinema. To do this, I create a function selectCinema that will perform a new query to fetch a specific subcollection.

...
const selectCinema = (cinema) => {
  database.collection('cinemas').doc(cinema.id).collection('movies').get()
    .then(response => {
      response.forEach(document => {
        // access the movie information
      });
    })
    .catch(error => {
      setError(error);
    });
}
..
{cinemas.map(cinema => (
  <li key={cinema.id} onClick={() => selectCinema(cinema)}>
    <b>{cinema.name}</b> in {cinema.city} has {cinema.total_seats} total seats
  </li>
))}

At this point is easy managing the show/hide logic with React using the state.

A working demo

Gaunt but working.