React Lists

⚛️ React Lists

In React, you can loop through arrays and display them using the JavaScript method .map().

🔹 Basic Example: Rendering an Array

✔ map() loops through the array and returns JSX for each item.

🔹 Lists with Keys (Important)

React requires a unique key for each list item to help update UI efficiently.

key must be unique and stable. Avoid using index unless no unique ID exists.

🔹 Better Example Using IDs

✔ Best practice: Use a real unique ID as key.

🔹 Rendering List with Components

🔹 List of Objects in Components

function Product({ name, price }) {
return (
<p>
{name} - ₹{price}
</p>
);
}

function App() {
const products = [
{ id: 1, name: "Laptop", price: 50000 },
{ id: 2, name: "Mobile", price: 20000 }
];

return (
<div>
{products.map((p) => (
<Product key={p.id} name={p.name} price={p.price} />
))}
</div>
);
}

function Product({ name, price }) {

return (

<p>

{name} - ₹{price}

</p>

);

}

function App() {

const products = [

{ id: 1, name: "Laptop", price: 50000 },

{ id: 2, name: "Mobile", price: 20000 }

];

return (

<div>

{products.map((p) => (

))}

</div>

);

}

🔹 Conditional Rendering Inside Lists

function App() {
const todos = [
{ id: 1, task: "Study React", completed: true },
{ id: 2, task: "Build project", completed: false }
];

return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.task} {todo.completed && "✔"}
</li>
))}
</ul>
);
}

function App() {

const todos = [

{ id: 1, task: "Study React", completed: true },

{ id: 2, task: "Build project", completed: false }

];

return (

<ul>

{todos.map((todo) => (

{todo.task} {todo.completed && "✔"}

</li>

))}

</ul>

);

}

✔ Summary

Concept	Description
`map()`	Used to loop and return JSX
Keys	Required by React to track elements
Unique IDs	Better than using array index
Can map components	For clean structure

React Lists help dynamically render repeating UI from arrays, making your app scalable and dynamic.

React Lists

⚛️ React Lists

🔹 Basic Example: Rendering an Array

🔹 Lists with Keys (Important)

🔹 Better Example Using IDs

🔹 Rendering List with Components

🔹 List of Objects in Components

🔹 Conditional Rendering Inside Lists

✔ Summary

You may also like...

React Tutorial

React Hook

React Lists

⚛️ React Lists

🔹 Basic Example: Rendering an Array

🔹 Lists with Keys (Important)

🔹 Better Example Using IDs

🔹 Rendering List with Components

🔹 List of Objects in Components

🔹 Conditional Rendering Inside Lists

✔ Summary

You may also like...

React Forms Radio Buttons

React ES6 Spread Operator

Upgrade React

React Tutorial

React Hook