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

Как отрендерить список (массив) в 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 и радуемся!

Также может быть вам интересно:

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

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

Читать »

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

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

Читать »
Фото Только одна из десяти компаний ожидает, что все работники вернутся в офисы

Только одна из десяти компаний ожидает, что все работники вернутся в офисы

Проведённое в США исследование показывает, что далеко не все компании ожидают возвращение к старому образу работы после пандемии.

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

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

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

Фото История typeof null в JavaScript – ошибка, необходимая для обратной совместимости

История typeof null в JavaScript – ошибка, необходимая для обратной совместимости

В JavaScript есть множество исключений и просто забавных подходов к преобразованию типов. Про "один из них" и хочется рассказать.

Фото Социальная сеть – фильм о создании Facebook

Социальная сеть – фильм о создании Facebook

Фильм о создании и создателях самой большой социальной сети в мире. Марк Цукерберг – гений программирования или же обмана?

Фото Как настроить отправку почты из Django

Как настроить отправку почты из Django

Письма об ошибках, отчёты на почту, восстановление паролей - всё это полезно при работе с сайтом. Django предоставляет удобный способ это сделать с минимумом настроек!

Фото Добавляем поддержку медиа-файлов в Django проект

Добавляем поддержку медиа-файлов в Django проект

Современные сайты редко ограничиваются только текстом и вёрсткой. Часто в заметках красуются фотографии, а рядом с описанием товаров - их изображения.

Фото Настройка журналирования (логирования) в Python с примерами

Настройка журналирования (логирования) в Python с примерами

Во время работы программы часто нужно сохранять некоторые важные записи о процессе выполнения команды. В Python есть довольно мощный модуль для работы с логами - давайте разберёмся с тем, как его использовать.

Фото Шаблон разработки ПО — Model View Controller (MVC)

Шаблон разработки ПО — Model View Controller (MVC)

MVC - один из самых распространённых архитектурных шаблонов разработки. Часто используется в различных фреймворках. В том числе и в Django.