Map Function in ReactJs

Kirti Mahajan

1 min read

·

May 9, 2025

--

Listen

Share

📝 React Notes — 3 Ways to Use .map() to Render Components

Press enter or click to view image in full size

first way=> {users.map((user)=><User {...user}/>)} 
second way=>  {{users.map((user)=>{
      return <User {...user}/>})}

third way=>{users.map((user)=>(
        <User {...user}/>
      ))}

const users = [
  { firstName: "Aarav", lastName: "Sharma", city: "Delhi" },
  { firstName: "Sneha", lastName: "Patel", city: "Ahmedabad" },
  { firstName: "Rohan", lastName: "Mehta", city: "Mumbai" },
  { firstName: "Isha", lastName: "Verma", city: "Bangalore" },
  { firstName: "Kunal", lastName: "Thakur", city: "Pune" }
];

✅ 1. Short Syntax — Arrow Function with Implicit Return

{users.map((user) => <User {...user} />)}

• Most concise way
• No return keyword needed
• Best for single-line rendering

✅ 2. Arrow Function with return

{users.map((user) => {
  return <User {...user} />;
})}

• Use when you need more logic inside the function
• Allows multiline code

✅ 3. Classic Example (Commented) without return

{/* {users.map((user) => (
<User {...user} />)
)} */}

• Same as example 1, just commented for reference

💡 Always add a key prop in real-world usage with ( ) brackests

{users.map((user, index) => (
  <User key={index} {...user} />
))}