Using flexbox grid to populate API data in React - HELP!

I’m making a react website… for the news page I’m using data from news api (https://newsapi.org/) The data does appear on the page but it won’t respond to CSS flexbox accordingly. My intention was, each news-row will look like a card containing image, headline, and brief content and the boxes should go like this :
box box box box
box box box box
box box box box

When I open the console it looks like this:
box
box
box
box
box

The CSS and card component are correct, however the API data is only populating the component in a new Flex container each time…

How can I get data to populate the flex cards in the layout created instead of the populating it in a new parent wrapper each time?

Can you share the code you have tried so far?

1 Like

I am going to answer my own question now… as I have found the solution!

In order to have the container be a flex item in React(with populated API data), you need to add the Parent Flex Container to another component… one that is a parent of the component being rendered.

Basically, make one component the Flex parent(the one where you are mapping the data and creating the key), and another a flex child and import css styles to both.

React can so complex… but after a few days I figured it out!