Почему не выводится див из функции buildLegendItem?

Question

[newked]

Ребят, подскажите где ошибка? Почему не выводит каждый элемент массива в div-е?

const buildLegendItem = function (x){
    return (
        <div><span>{x}</span></div>
    );
}

export default function Legend(props){
        return(
            <>
                <div className="legend">
                    {[1,2,3,4,5].map(x=>{ buildLegendItem(x) })}
                </div>
            </>
        )
}

Comments

[WbICHA]

https://developer.mozilla.org/en-US/docs/Web/JavaS...

[WbICHA]

return

Answer 1

[0x0f80]

Когда вы используете фигурные скобки внутри метода map, Js ожидает, что вы будете явно указывать, что должно быть возвращено из функции, но внутри этих фигурных скобок у вас не стоит return перед вызовом buildLegendItem(x). В результате, ничего не возвращается из функции, переданной в map, и React не рендерит эти элементы.

Уберите фигурные скобки (так результат функции будет возвращён автоматически), либо добавьте return перед buildLegendItem(x)