React grid layout not working with firebase - reactjs

Question

I changed my code so that it would bring in the information from cloud firestore instead of hardcoding it. This is my old code without firebase:
<div className="grid">
<div className="grid-child">
<img className="subImg" src={amsterdam}></img>
<p className="subImgTitle">Amsterdam</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={london}></img>
<p className="subImgTitle">London</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={madrid}></img>
<p className="subImgTitle">Madrid</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={paris}></img>
<p className="subImgTitle">Paris</p>
<p className="subImgText">Hotels from £?</p>
</div>
</div>
And this is my new code with firebase:
destinations?.map(destination => {
return (
<div className="grid">
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
</div>
)
})
In the original code, the images are all in a row however now they are all in one column. I am not too sure how to fix this so any help would be greatly appreciated. Thanks :)

Answer 1

If you compare the DOM rendered by each example, you will see that the problem is that in the first example you have a single <div className="grid"> but in the second you wrap each image in <div className="grid">. To fix this, just be sure to create only one grid:
<div className="grid">
{ destinations?.map(destination => {
return (
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
)
})
}
</div>
As a next step, consider refactoring a GridChild component that encapsulates the HTML for each image in the grid.