Не получается вывести список характеристик о товаре. Map отрабатывает, однако данные не появляются на странице

Question

Есть страница, где находится информация о товаре: цена, картинка и характеристики. Каждая характеристика о товаре добавляется тегом Row.

Информацию через console.log() получаю, но Row не выводится на страницу.

<h4 className="text-center mb-3">Характеристики: </h4>
<div className="d-flex flex-column">
{
  device.info.map((info, index) => {
    <Row className="deviceInfoBlock__item" key={info.id} style={{background: index % 2 === 0 ? '#343a40' : '#495057', padding: 10}}>
      {info.title}: {info.description}
    </Row>
    console.log("title " + info.title + " description: " + info.description);
  }             
)}

Что здесь может быть не так?

Answer 1

Нужен return в map

device.info.map((info, index) => {
    console.log("title " + info.title + " description: " + info.description);
    return ( 
        <Row className="deviceInfoBlock__item" key={info.id} style={{background: index % 2 === 0 ? '#343a40' : '#495057', padding: 10}}>
            {info.title}: {info.description}
        </Row> 
    );
}

Либо убрать console.log() и сделать так:

device.info.map((info, index) => (
    <Row className="deviceInfoBlock__item" key={info.id} style={{background: index % 2 === 0 ? '#343a40' : '#495057', padding: 10}}>
        {info.title}: {info.description}
    </Row>
));

Стрелочная функция, по умолчанию, возвращает результат, если тело функции одна строка. Во всех остальных случаях нужный явный return

БЛОГ НА HUSL

Не получается вывести список характеристик о товаре. Map отрабатывает, однако данные не появляются на странице

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