4

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

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

// пока получилось следующее 
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 ","

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

1 ответ 1

3

Вам нужно перенести сам 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

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

2
  • Если я получаю массив как ответ от сервера, могу ли я использовать например id каждого элемента этого массива как уникальный ключ?
    – mishmish
    Commented 6 сент. 2020 в 19:03
  • 1
    @mishmish, да, если они будут уникальными внутри того блока куда производиться maping. Добавил в ответ
    – Vasily
    Commented 6 сент. 2020 в 19:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.