I'm using firestore database to store my data in the collection "listings". So for each document in "listings", I need to render a `<BookListing/>` element in Home.js with the data from each document. From my research, there are a few other questions similar to this one out there, but they're outdated and use different react syntax. Here's my code:

```
function BookListing({id, ISBN, title, image, price}) {

    return (
        <div className="bookListing">
            <div className='bookListing_info'>
                <p className="bookListing_infoTitle">{title}</p>
                <p className="bookListing_infoISBN"><span className="bookListing_infoISBNtag">ISBN: </span>{ISBN}</p>
                <p className="bookListing_infoPrice">
                    <small>$</small>
                    {price}
                </p>
            </div>
            <img className="bookListing_img" src={image} alt=""></img>
            <button className="bookListing_addToCart">Add to Cart</button>
        </div>
    )
}

export default BookListing

```

---

```
function Home() {

    document.title ="Home";

    useEffect(() => {
        getDocs(collection(db, 'listings'))
        .then(queryCollection => {
            queryCollection.forEach((doc) => {
                console.log(doc.id, " => ", doc.data());
                const element = <BookListing id="456" ISBN="0101" title="sample_title" image="https://nnpbeta.wustl.edu/img/bookCovers/genericBookCover.jpg" price="25"/>;
                ReactDOM.render(
                    element,
                    document.getElementById('home-contents-main')
                );
            })
        });
    }, []);

    return (
        <div className="home">
            <div className="home_container">
                <div id="home-contents-main" className="home_contents">
                </div>
            </div>
        </div>
    )
}
export default Home

```