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.