I have an array but only first array element is rendering.How to do this. This is response from Firebase. In console it is fine but in jsx only first element is rendering. Here is my code
let users=[
{
email: "rabina@gmail.com",
id: "jqGZhhXDa8xI4iMtYO0U",
joined_at: Fri Dec 03 2021 03:44:44 GMT+0545 (Nepal Time),
name: "Rabina chandak",
profile: "https://picsum.photos/200/300/?blur=2"
},
{
id: 'LVEy69S3VIZXdztSKTyG',
name: 'Jeevan',
email: 'jeevan@gmail.com',
joined_at: Fri Nov 12 2021 11:33:33 GMT+0545 (Nepal Time),
profile: 'https://picsum.photos/200/300/?blur=5'
}
]
users.map((user)=>{
console.log(user.id)
})
const User=()=>{
return(
div className="flex">
<div className="bg-gray-100 w-full p-4 justify-between">
<div className="lg:mx-16 mx-8">
<div className="grid lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-1 gap-4">
{
{users.forEach((user)=>{
return <UserCard key={user.id} name={user.name} email={user.email} id={user.id} profile={user.profile} session={session}/>
})}
}
</div>
</div>
</div>
</div>
)
}
try this code:
<div>
{users.map((user) => (
<h2>{user.name}</h2>
))}
</div>
instead of this, it will work perfect:
const User = () => {
return users.map(user => {
return (
<p>
{user.id}
</p>
);
});
};