Frontend | Вопросы собесов on Telegram: “🤔 Как отрисовать массив элементов? В React для…”

🤔 Как отрисовать массив элементов?

В React для отрисовки массива элементов используется метод map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.

🚩Пример использования `map()` для отрисовки массива

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        {user.name} - {user.age} years old
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default UserList;

1⃣Использование map()

{users.map(user => (
    <li key={user.id}>
        {user.name} - {user.age} years old
    </li>
))}

2⃣Атрибут key

<li key={user.id}>

🚩Отрисовка сложных компонентов

Если каждый элемент массива представляет собой более сложный компонент, можно создать отдельный компонент для каждого элемента и использовать его внутри map().

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
    { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
    { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' }
];

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            {users.map(user => (
                <UserItem key={user.id} user={user} />
            ))}
        </div>
    );
};

export default UserList;

1⃣Создание компонента для элемента списка

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};

2⃣Использование компонента внутри map()

{users.map(user => (
    <UserItem key={user.id} user={user} />
))}

Ставь 👍 и забирай 📚 Базу знаний