I am using ReactJS to try and build a web app with a Firestore Database backend. And I am currently attempting to query my Firestore Database. I am attempting to query an element from an array from a document in a collection. I have successfully queried to the array level, but I am having trouble getting down to the element level.

In the database we have and 'Events' collection. With in that collection there are documents that signify an event on our web app. Within the document there is a field called guests. This field guests is of type array.

I want to display each of the guests on a new line in a list element. I can currently only display the whole array of guests not each individual element (guest).

The code will console log the guests names but it will not display them on the local development server. I would really appreciate any help about why this might be.

// 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>
    )
    
}