Почему элементы массива не отрисовываются в интерфейсе?

Question

[Александр]

Коллеги, добрый день!
Подскажите пожалуйста, почему элементы массива не отрисовываются в интерфейсе.
Имеется массив:
"usersData": [
{
"location": {
"country": "Japan",
"city": "Oshu"
},
"id": 0,
"status": "center fielder",
"photoUrl": "https://static01.nyt.com/images/2021/06/30/sports/...",
"fullName": "Shohei Ohtani",
"followed": false
},
{
"id": 1,
"followed": true,
"fullName": "Josh Donaldson",
"status": "Third Baseman",
"location": {
"city": "Pensacola",
"country": "FL"
},
"photoUrl": "https://calltothepen.com/files/2014/05/josh-donald..."
},
{
"photoUrl": "https://www.cp24.com/polopoly_fs/1.6100695.1665161...",
"location": {
"country": "Dominican Republic",
"city": "La Romana"
},
"followed": true,
"status": "first baseman",
"fullName": "Edwin Encarnación",
"id": 2
}
]

и код:

let res = usersData.map(function(item) {
    console.log(item[0].fullName);
    return  <div>
            <div key={item.id}>
                    <div> 
                        {item.fullName}
                    </div>
                </div> 
        </div>;
});

return <div>{res}</div>

После маппинга по масииву console.log(item[0].fullName) выводит первый объект fullName, но console.log(item.fullName) почему-то выводит undefined.

Answer 1

[вовчек]

let res = usersData.map(item => {
    return (
        <div key={item.id}>
            <p>{item.fullName}</p>
        </div>
    )
});

return <div> {res} </div>

Comments

[Александр]

при маппинге почему-то {item.fullName} возвращает undefined, но выводит {item[0].fullName}

[вовчек]

Александр,

const usersData = [
    {
        "location": {
            "country": "Japan",
            "city": "Oshu"
        },
        "id": 0,
        "status": "center fielder",
        "photoUrl": "https://static01.nyt.com/images/2021/06/30/sports/...",
        "fullName": "Shohei Ohtani",
        "followed": false
    },
    {
        "id": 1,
        "followed": true,
        "fullName": "Josh Donaldson",
        "status": "Third Baseman",
        "location": {
            "city": "Pensacola",
            "country": "FL"
        },
        "photoUrl": "https://calltothepen.com/files/2014/05/josh-donald..."
    },
    {
        "photoUrl": "https://www.cp24.com/polopoly_fs/1.6100695.1665161...",
        "location": {
            "country": "Dominican Republic",
            "city": "La Romana"
        },
        "followed": true,
        "status": "first baseman",
        "fullName": "Edwin Encarnación",
        "id": 2
    }
];

let res = usersData.map(item => {
    return item.fullName;
});

console.log(res);

[вовчек]

вовчек, Консоль: [ 'Shohei Ohtani', 'Josh Donaldson', 'Edwin Encarnación' ]

[Александр]

вовчек, я понял в чём ошибка, у меня массив приходит как [Array(3)], а не тот, что у меня в примере  [{…}, {…}, {…}].
[Array(3)] данным способом нельзя размапить. Подскажи пожалуйста, как можно преобразовать [Array(3)] в [{…}, {…}, {…}]

[Александр]

вовчек, спасибо за потраченное время, сам докрутил