Ошибка с ключами

Question

Имеется такой код:

function ElementList(props) {
    let names = props.names;
    let listItems = names.map((name) =>
        <Element key={name.name} />
    );
    return (
        {listItems}
    );
}

let names = [
    {id: 0, name: 'name1'},
    {id: 1, name: 'name2'},
    {id: 2, name: 'name3'},
];

class Show extends React.Component {

    render() {
        return (
            <div>
                <ElementList names={names}/>
            </div>
        );
    }
}

Получаю ошибку: Objects are not valid as a React child (found: object with keys {listItems}). If you meant to render a collection of children, use an array instead. Искренне не пойму, что оно от меня хочет.

Answer 1

Ключ — это специальный строковый атрибут, который нужно указывать при создании списка элементов. Тут можно почитать подробнее Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени

Answer 2

Разобрался сам, нужно было перенести выражение listItems в return:

function ElementList(props) {
    let names = props.names;
    return (
        names.map((name) =>
            <Element key={name}/>
    ));
}

БЛОГ НА HUSL

Ошибка с ключами

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