How to render props from parent component to child?

I’m trying to loop through an array and send a title & description to a child component. However, the child component isn’t recognized the props I have assigned to it in the parent component.

News.js:

const AllNews = [
{
    title: 'Reverse The Online Gambling Ban',
    description: 'The MPA comes with three different sizes of foam and silicone tips and a carrying pouch.'
},
{
    title: 'Successful Myspace Profile',
    description: 'All users on MySpace will know that there are millions of people out there.'
},
{
    title: 'Home Audio Recording For Everyone',
    description: 'The number of friends and acquaintances will grow in a large number. This is what you should be looking for.'
},
{
    title: 'Buying Used Electronic Test Equipment',
    description: 'People after all will make friends after reading about you. If you have an ugly profile, there is no way they will want to date you.'
}
]

export default function News() {
const classes = useStyles();

const listNews = AllNews.forEach(news => {
    <Singlenews title={news.title} description={news.description}/>
})

return (
    <div>
        {listNews}
    </div>
)

}

Singlenews.js:

export default function Singlenews(props) {
const classes = useStyles();
const {title, description} = props

return (
<div className={classes.group4}>
  <div className={classes.bitmap}/>
    <div className={classes.flexCol}>
      <div className={classes.reverseTheOnlineG}>
      {title}
      </div>
      <div className={classes.group4}>
        <p className={classes.theMpaComesWithT}>
         {description}
       </p>
      <div className={classes.oval}/>
    </div>
  </div>
</div>
)

}

Answer

In this part here:

const listNews = AllNews.forEach(news => {
    <Singlenews title={news.title} description={news.description}/>
})

you are looping over each item in AllNews and creating Singlenews components using the forEach function. Thats definitely the right idea, the problem is that the forEach function returns undefined (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). So listNews actually equals undefined in this case.

My recommendation would be to look at the map function in JavaScript (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). This function maps a callback to each element of the array and returns a new array, containing the return values from the callback. So in this case, you could map a <SingleNews> component to each element in AllNews, passing props down just like you already have it:

const listNews = AllNews.map(news => {
    return <Singlenews title={news.title} description={news.description}/>
})

This way, listNews is an array of <Singlenews> items like you intended, with the props correctly set. Not a problem with the props, a problem with the loop!