array of object is not rendering in react js-CodePudding

I am trying to render array of object using the map method, but it gives an error message

list.map is not a function

How I can render this?

The array object I want to render is:

let list= [
{
    "id": "8xI09EfZGldA3wMEdwUW",
    "users": ["[email protected]", "[email protected]"],
    "timestamp": {
        "seconds": 1639825713,
        "nanoseconds": 687000000
    }
},
{
    "id": "PiDJjjeH0eubfLz2WIe5",
    "timestamp": {
        "seconds": 1639825709,
        "nanoseconds": 341000000
    },
    "users": ["[email protected]", "[email protected]"]
},
{
    "id": "ayAFmLpIGdUHYe8fiVvb",
    "timestamp": {
        "seconds": 1639825712,
        "nanoseconds": 291000000
    },
    "users": ["[email protected]", "[email protected]"]
}
];




 list.map((user)=>{
    console.log(user.id);
    })

CodePudding user response：

cuz list: [{data}] is not an array. fix your code like this.

const list = [{data}, {data}, {data}, ...]
..//
{list.map(data => <Component data={data}/>);}

CodePudding user response：

Though the question is not clear i will assume two cases for the data you are trying to map.

Case One

Assuming your data-list is of the form ..

const list = [{"id":"8xI09EfZGldA3wMEdwUW","users":["[email protected]","[email protected]"],"timestamp":{"seconds":1639825713,"nanoseconds":687000000}},{"id":"PiDJjjeH0eubfLz2WIe5","timestamp":{"seconds":1639825709,"nanoseconds":341000000},"users":["[email protected]","[email protected]"]},{"id":"ayAFmLpIGdUHYe8fiVvb","timestamp":{"seconds":1639825712,"nanoseconds":291000000},"users":["[email protected]","[email protected]"]}]

You can then display the ids like this on your return statement ....

list.map((item)=> <p>{item.id}</p>)

Case Two

Asuming your list is a property of an object of the form ....

const myObj = {
      list: [{"id":"8xI09EfZGldA3wMEdwUW","users":["[email protected]","[email protected]"],"timestamp":{"seconds":1639825713,"nanoseconds":687000000}},{"id":"PiDJjjeH0eubfLz2WIe5","timestamp":{"seconds":1639825709,"nanoseconds":341000000},"users":["[email protected]","[email protected]"]},{"id":"ayAFmLpIGdUHYe8fiVvb","timestamp":{"seconds":1639825712,"nanoseconds":291000000},"users":["[email protected]","[email protected]"]}]

Then you can map the object like this ....

myObj.list.map((item)=> <p>{item.id}</p>)
  }