Как отрендерить список (массив) в React

Очередной простой рецепт. На этот раз - для React-компонет! Рендерим элементы списка.

Предположим, мы хотим отрендерить список карточек юзеров/постов/товаров и т.д. Предположим, наш пост:

const Post = ({ post }) => {
    <div className="post">
        <h2>{post.title}</h2>
    </div>
};

Тогда наш компонент списков постов будет обёрткой+map-ом постов в компоненты. Примерно вот так:

const PostList = ({ posts }) => {
    <div className="postList">
        {posts.map((item) => (
            <Post post={item} />
        )}
    </div>
};

Либо, если хочется - for с итеративным закидыванием компонент в "аккумулятор", после чего вывод, но читается сложнее.

В общем, не забываем о возможности выполнения кода в jsx и радуемся!