ES6 карту не удалось вынести, отсутствие ошибок в консоли

Question

В моей визуализации функции я console.log (элементы) Я получил это

но почему мой рендеринга вывода ничего?

{items.map(item => { 
    <li key={item.id}>item.name</li> 
})} 

Answer 1

Вы пропускаете оператор возврата в теле функции стрелки, а также фигурные скобки вокруг item.name, необходимый синтаксис для интерполяции в JSX.

{items.map(item => { 
     return <li key={item.id}>{item.name}</li> 
// ^     ^  ^
})} 

Посмотрите на JSX In Depth, который имеет множество деталей может оказаться полезной.

Answer 2

{items.map(item => { 
    <li key={item.id}>item.name</li> 
})} 

Это не возвращает <li /> от функции карты. Что вам нужно:

{items.map(item => <li key={item.id}>item.name</li>)} 

который возвращает <li /> неявно или сделать:

{items.map(item => { 
    return <li key={item.id}>item.name</li> 
})} 

Answer 3

Вы забыли о возвращении)

{items.map(item => { 
     return <li key={item.id}>item.name</li> 
    })} 

или может написать как это

{items.map(item => <li key={item.id}>item.name</li> )}