Как передать список дат в качестве пропса в React?

Question

James

javascript , react

Как передать список дат в качестве пропса в React?

Как можно исправить компонент `List`, чтобы он корректно создавал отдельные элементы `<li>` для каждого элемента из массива `list`, вместо того чтобы выводить их в одном элементе `<li>` как это происходит сейчас? В текущем результате получается `<li>одиндва</li>`, тогда как необходимо, чтобы выводилось `<li>один</li><li>два</li>`.

14 марта 2025 г. 0:24

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы передать список дат в качестве пропса в React и корректно отображать их, вам нужно убедиться, что вы итеративно создаете отдельные элементы `<li>` для каждого элемента массива. Мы можем использовать метод `map` для этого.

Вот пример, как вы можете исправить ваш компонент `List`:

```jsx
import React from 'react';

const List = ({ list }) => {
    return (
        <ul>
            {list.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
};

// Пример использования компонента
const App = () => {
    const dates = ['2023-01-01', '2023-02-01', '2023-03-01'];
    
    return (
        <div>
            <h1>Список дат</h1>
            <List list={dates} />
        </div>
    );
};

export default App;
```

В этом примере:

1. Мы принимаем `list` как пропс в компоненте `List`.
2. Используем метод `map`, чтобы пройтись по каждому элементу массива `list`.
3. Для каждого элемента массива создаем новый элемент `<li>` с уникальным ключом (в данном случае — индексом из `map`).
4. Рендерим отдельные элементы в списке `<ul>`.

Таким образом, если у вас в массиве `list` находятся строки ‘один’ и ‘два’, то вы получите необходимый результат:

```html
<ul>
    <li>один</li>
    <li>два</li>
</ul>
```