在react中使用array.map

我很困惑这个代码是如何工作的

const sidebar = (
        <ul>
        {
            props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )
        }
        </ul>
    );

我知道一个映射返回一个数组,但是它如何返回所有这些标记

<li key={post.id}>
    {post.title}
</li>

并渲染它?

我试过把它改成foreach,但没用。用户界面上没有显示任何内容:

const sidebar = (
    <ul>
        {
            props.posts.forEach((post) =>{
                return <li key={post.id}>
                    {post.title}
                </li>
            })
        }
    </ul>
);