only first array element is rendering in react js

Question

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>
     )
    }

you're returning an object in User Function. Remove the curly braces after `return` — boxdox, Dec 22 '21 at 03:59
Please provide a [mcve]. The current code in your question isn't valid (unbalanced tags, invalid syntax in the objects, etc). — Emile Bergeron, Dec 22 '21 at 04:15
Does this answer your question? [forEach() in React JSX does not output any HTML](https://stackoverflow.com/questions/47616355/foreach-in-react-jsx-does-not-output-any-html) — Emile Bergeron, Dec 22 '21 at 04:28
First whole array element render then again only first one is render and others is... — Jeevan, Dec 22 '21 at 05:03

score 0 · Answer 1 · edited Dec 22 '21 at 04:14

0

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>
        );
    });
};

edited Dec 22 '21 at 04:14

Amila Senadheera

12,229
15
27
43

answered Dec 22 '21 at 04:05

Dawood Ahmad

476
4
13

Not work, I hove done in same way in my real code... – Jeevan Dec 22 '21 at 04:13
1

It would be great if you could explain what the problem was and why your new code fixes it. That will make it more helpful to the op. – Willow Dec 22 '21 at 04:14
Only first array element is rendering but not others – Jeevan Dec 22 '21 at 04:15
Returning an array of nodes is valid React, there's no need to wrap the whole thing with a `
`.
– Emile Bergeron Dec 22 '21 at 04:18
First entire element is rendering then only first element is rendering and other is not rendering... – Jeevan Dec 22 '21 at 05:33

only first array element is rendering in react js

1 Answers1