Как отрисовать список(массив) в react.js?

@linnea 

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

Вот пример кода, который отображает список элементов массива в виде маркированного списка:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React from 'react';

function MyComponent(props) {
  const myList = props.list.map((item, index) => (
    <li key={index}>{item}</li>
  ));

  return (
    <ul>
      {myList}
    </ul>
  );
}

export default MyComponent;

В этом примере компонент MyComponent получает массив list через свойства props. Затем используется метод map() для создания массива <li> элементов из каждого элемента массива list. Важно установить ключ key для каждого элемента списка, чтобы React мог эффективно отслеживать изменения элементов списка.

Наконец, отображаем список элементов, помещая массив <li> элементов внутри тега <ul>. Каждый элемент списка будет отображаться на отдельной строке внутри маркированного списка.

@linnea 

В компоненте, который будет отображать список (например, App.js), необходимо импортировать компонент, в котором будет прописано отображение списка (например, MyComponent.js). После этого можно передать массив с элементами в компонент MyComponent через свойство props.

Пример кода в файле App.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

function App() {
  const myList = ['item 1', 'item 2', 'item 3'];

  return (
    <div>
      <h1>Список элементов</h1>
      <MyComponent list={myList} />
    </div>
  );
}

export default App;

Пример кода в файле MyComponent.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React from 'react';

function MyComponent(props) {
  const myList = props.list.map((item, index) => (
    <li key={index}>{item}</li>
  ));

  return (
    <ul>
      {myList}
    </ul>
  );
}

export default MyComponent;

В этом примере в компоненте App создается массив myList, который содержит элементы списка. Затем этот массив передается в компонент MyComponent через свойство list. В компоненте MyComponent с использованием метода map() создается массив элементов из каждого элемента списка. И наконец, отображается список элементов внутри тега .