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

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

ПрограммыFacebookJavaScriptReact

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

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 и радуемся!

Фото Что делать, если не успеваешь сделать в срок
Что делать, если не успеваешь сделать в срок

У части программистов есть огромная беда - они впадают в стопор, если не успевают решить задачу в скрок.

Фото Важна ли Операционная Система для программиста?
Важна ли Операционная Система для программиста?

Влияет ли выбор операционной системы на возможности программиста? Какую ОС выбрать конкретному разработчику?