Estoy usando ReactJS para intentar crear una aplicación web con un backend de base de datos Firestore. Y actualmente estoy intentando consultar mi base de datos Firestore. Estoy intentando consultar un elemento de una matriz de un documento en una colección. He consultado con éxito al nivel de la matriz, pero tengo problemas para llegar al nivel del elemento.

En la base de datos tenemos una colección de 'Eventos'. En esa colección hay documentos que significan un evento en nuestra aplicación web. Dentro del documento hay un campo llamado invitados. Este campo invitados es de tipo matriz.

Quiero mostrar a cada uno de los invitados en una nueva línea en un elemento de lista. Actualmente solo puedo mostrar toda la gama de invitados, no cada elemento individual (invitado).

El código registrará en la consola los nombres de los invitados, pero no los mostrará en el servidor de desarrollo local. Realmente agradecería cualquier ayuda sobre por qué esto podría ser.

 // helper function that loops through and array of strings // and prints them out into html decending order list element function lister(list) { var i; if (Array.isArray(list)) { var length = list.length; for (i = 0; i < length; i++) { <li>(list[i])</li> console.log(list[i]) } } } // Events takes in an array of names // determines which of the list of names // is going to the event and lists out those names export default function Event(){ const [events, setEvents] = useState([]); useEffect( () => onSnapshot(collection(db, "Events"), (snapshot) => setEvents(snapshot.docs.map((doc) => ({...doc.data(), id: doc.id}))), ), [] ); return( <div> <ul> {/* Looping through the events by their unique ids */} {events.map((events) => ( <li key={events.id}> {events.title} {lister(events.guests)} </li> ))} </ul> </div> ) }