I am using Firebase database in my project. When I retrieve my data the payload looks like this:
{
-randomId123: {name: "foo", surname: "bar" },
....
}
How can I correctly render my list in my component:
export const App = () => {
const [data, setData] = useState(dummyData);
const items = data.map((v) => {
console.log(v.val())
});
setData(items)
return (
<div>
<> {data.map((d) => {
<p> {d.key} {d.name} {d.surname} </p>
})} </>
</div>
);
};
Expected output:
<p> randomId123 foo bar <p>
Objects are not valid as a React child (found: object with keys {-randomId123 , -randomId456, -randomId789}). If you meant to render a collection of children, use an array instead.
The following is an object.
{
-randomId123: {name: "foo", surname: "bar" },
....
}
If this were data, then one may not be able to iterate using data.map().
In order to render:
<p> randomId123 foo bar <p>
Please try below:
<div>
{Object.keys(data).map(k => (
<p> {k} {data[k].name} {data[k].surname} </p>
)}
</div>