Динамический список в React – это очень полезная функция, которая позволяет отображать элементы на странице в зависимости от данных. В этом ответе мы разберем, как создать такой список шаг за шагом.

Шаг 1: Установка React

Если у вас еще нет установленного проекта React, вы можете создать его с помощью Create React App. Для этого выполните следующую команду в терминале:

npx create-react-app my-app

После этого перейдите в созданный каталог:

cd my-app

Шаг 2: Создание компонента

Теперь давайте создадим компонент, который будет отображать наш динамический список. Создайте новый файл DynamicList.js в папке src вашего проекта:

touch src/DynamicList.js

Откройте файл DynamicList.js и добавьте следующий код:

import React, { useState } from 'react';

const DynamicList = () => {
    const [items, setItems] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addItem = () => {
        if (inputValue) {
            setItems([...items, inputValue]);
            setInputValue('');
        }
    };

    return (
        

            
Динамический список
             setInputValue(e.target.value)}
                placeholder='Введите элемент'
            />
            Добавить
            

                {items.map((item, index) => (
                    
{item}
                ))}
            
        
    );
};

export default DynamicList;

В этом компоненте мы используем useState для хранения элементов списка и значения поля ввода. Функция addItem добавляет новый элемент в список, если поле ввода не пустое.

Шаг 3: Использование компонента

Теперь вернемся в файл App.js и импортируем наш компонент DynamicList:

import React from 'react';
import DynamicList from './DynamicList';

const App = () => {
    return (
        

            
Мое приложение на React
            
        
    );
};

export default App;

Теперь, когда мы отобразили компонент DynamicList, мы можем запустить приложение и протестировать его. Для этого в терминале выполните команду:

npm start

Это откроет ваше приложение в браузере. Вы увидите поле для ввода и кнопку Добавить.

Шаг 4: Улучшение функциональности

Вы можете улучшить функциональность вашего списка, добавив возможность удаления элементов. Для этого обновим код компонента DynamicList:

const removeItem = (index) => {
    const newItems = items.filter((_, i) => i !== index);
    setItems(newItems);
};


    {items.map((item, index) => (
        

            {item}  removeItem(index)}>Удалить
        
    ))}

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

Шаг 5: Заключение

Теперь вы знаете, как создавать динамические списки в React! Вы можете экспериментировать с различными функциями, такими как сортировка списка, редактирование элементов и т.д. React предоставляет много возможностей для работы с данными и отображением их на экране.

Не бойтесь экспериментировать и улучшать свои навыки в разработке на React!