Bootstrap - creating columns within React, while rendering data - reactjs

Question

I'm trying to render my JSON data in a bootstrap column format, ideally I would have 3 items on each row, with it wrapping to the next row. Right now, it's only rendering one item per row. Could someone point me in the right direction in terms of what I'm missing here?
Part of my component:
let parksJsx = ''
if (!parks) {
parksJsx = 'loading...'
} else {
parksJsx = parks.map(park => (
<Container key={park.Name}>
<Row>
<Col lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
</Row>
</Container>
))
}
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
{parksJsx}
</div>
</div>
)
Current CSS:
.park-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.park-data {
flex: 0 1 auto;
}

Answer 1

Change your code to this:
let parksJsx = ''
if (!parks) {
parksJsx = 'loading...'
} else {
parksJsx = parks.map(park => (
<Col key={park.name} lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
))
}
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
<Container>
<Row>
{parksJsx}
</Row>
</Container>
</div>
</div>
)
The problem was that you were rendering a container with a row per park item instead of putting all the park items inside one container with a row.
The solution was to move the container with row components out of the individual park items and put them outside the parks map.
If I could recommend some formatting, I'd suggest you implement your component as follows:
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
{!parks ? 'loading...' :
<Container>
<Row>
{parks.map(park => (
<Col key={park.name} lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
))}
</Row>
</Container>
}
</div>
</div>
)
Then the logic is a lot easier to read from top to bottom.

Answer 2

First you need to separate the render function for a park and left there only a column with content, then you may try render all it in one row and it will work just fine because Row element has a display: flex .