Looping a ReactJS component inside of its parent component

Question

I have this component imported that returns a bunch of cards but I want to style this in a row instead of a column and it seems the way to do that is to loop the component as a <li> and then adding css but I cannot seem to make the component loop correctly.

the component looks like this inside of the parent element:

<div id="newsFeed" className='feed'>
<Feed theme={this.state.theme} articles = {this.state.articles} />
  </div>

I have tried solutions such as:

var feedContent = <Feed theme={this.state.theme} articles = {this.state.articles} />
///////////////////////
{feedContent.map(item => <Feed key={item} value={item} />)}
    </div>

but cannot seem to find any luck.

Any help would be greatly appreciated

Answer 1

map is a built in array method that is used a bunch in React. You need to use it on an array or else you will throw an error. I am assuming the value for articles is an array here:

//Feed component
class Feed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      articles = [] 
    };
  }

  componentDidMount = () => { // maybe call an API to populate the articles array }

  render = () => {
    return (
      <ul className="someClass" >
        {this.state.articles.map((item, index) => <li key={index} className="someOtherClass">{item}</li>)}
      </ul>
    );
  }

}

alternatively you could create a li component, perhaps called FeedItem, import it and map it with the value prop from each item in the articles array.

// render method for Feed Component
render = () => {
  return(
    <ul className="someClass">
      {this.state.articles.map((item, index) => <FeedItem key={index} value={item} />)}
    </ul>
  );
}

// FeedItem component
const FeedItem = ({value}) => {
  return(
    <li className="someOtherClass">{value}</li>
  );
}

so, you are using map to create a list with the items in your articles array, and the map function loops through each article and returns a list component. Hopefully this helps: here's the React docs for reference: https://reactjs.org/docs/lists-and-keys.html

note: React docs advise against using an index as a key, but I don't know if your article array elements contain something unique. If they do (like an id of some kind), use that instead of index.

Answer 2

I think you need to change the approach.

I'd recommend you create an Article component, example:

function Article({ title }) {
  <div>
    {title}
  <div>
}

After that, you might use the articles array to show each one:

//Feed component
this.state.articles.map((article, i) => <Article title={article.title}>)

In that way you can stylize the articles component as you want.

Answer 3

I was able to figure it out with simple CSS believe it or not. Basically <Feed /> was wrapped in a div in the parent component and was not responding to Flexbox CSS code, however, After I used changed the className of the div that was wrapping the component inside of its <div> within its own file the div responded to CSS, Thank you so much for your help everyone, I appreciate it!

Answer 4

Have you tried adding a className to the div that is the parent of the cards? Use that class to apply a flex display for example, and see what that gives you. If Newscard has a fixed width of 100% by chance, of course you'll need to adjust that to a small percentage / width to suit your needs.