Javascript 如何将道具从父组件渲染到子组件？

我试图循环遍历一个数组，并将标题和描述发送给子组件。但是，子组件无法识别我在父组件中分配给它的道具

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>
)

const AllNews=[
{
标题：“撤销网上赌博禁令”，
描述：“MPA配有三种不同尺寸的泡沫和硅胶头以及一个便携袋。”
},
{
标题：“成功的Myspace个人资料”，
描述：“MySpace上的所有用户都知道有数百万人在那里。”
},
{
标题：“每个人的家庭录音”，
描述：“朋友和熟人的数量将大量增加。这是你应该寻找的。”
},
{
标题：“购买二手电子测试设备”，
描述：“人们毕竟会在读到你的资料后交到朋友。如果你的个人资料很难看，他们就不会想和你约会。”
}
]
导出默认函数News（）{
const classes=useStyles（）；
const listNews=AllNews.forEach（news=>{
})
返回(
{listNews}
)

}

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>
)

导出默认函数Singlenews（道具）{
const classes=useStyles（）；
常量{title，description}=props
返回(
{title}

{说明}

)

---

}

试试这个

constlistnews=AllNews.map（news=>）

代替本部分中的
const listNews=AllNews.forEach（news=>{}）
，此处：

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

通过这种方式，
listNews
是一个由
项组成的数组，就像您想要的那样，并正确设置了道具。不是道具的问题，是环路的问题
 我的doofy asz没有归还任何东西…是的，非常好，谢谢！我刚刚用您发布的确切解决方案解决了这个问题。我真的很感谢你抽出时间！
const listNews = AllNews.map(news => {
    return <Singlenews title={news.title} description={news.description}/>
})