Как сделать вывод каждого элемента массива в блочный элемент? React

Question

Недавно стал изучать Реакт, встал вопрос как вывести каждый элемент массива в какую-то стилизованную форму (по типу блоков с товарами в интернет магазине).

Как это можно сделать?

// пока получилось следующее 
function App() {
    const array = [1,2,3];
    array.forEach((element) =>
        {    
        return (    
            <div className={classes.Fee}>
            {element}
            </div>
        )
        }
}

export default App;

// получаю ошибку: 
// Parsing error: Unexpected token, expected ","

И как это будет выглядеть через класс?

Answer 1

Вам нужно перенести сам mapping в return, добавить обертку (я использовал фрагмент), а так же дать каждому новому элементу уникальный ключ:

import React, { Fragment } from "react"

function App() {
  // const array = [1, 2, 3]
  // --- доработано на основе комментария автора ---
  // --- добавил новый входной массив ---
  const array = [{id: "hdj1", content: 1}, {id: "ptr2", content: 2}, {id: "gxn3", content: 3}]
  return (
    <Fragment>
      {array.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </Fragment>
  )
}

export default App

большой разницы с классами быть не должно, общий принцип будет тот же.

БЛОГ НА HUSL

Как сделать вывод каждого элемента массива в блочный элемент? React

Ответы (1 шт):