Rendering Lists in React means displaying multiple
items from an array or another collection of data. React commonly uses
JavaScript's map() method to create a list of JSX
elements.
key so React can efficiently identify
individual elements.
A list is a collection of related items. For example, a list of students can be stored in a JavaScript array.
const students = [
"Rahul",
"Neha",
"Amit",
"Priya"
];React can use this array to display multiple student names.
List rendering is useful when an application has multiple records or repeated UI elements.
The JavaScript map() method creates a new array by
applying a function to every item in an existing array.
const numbers = [1, 2, 3];
const result = numbers.map(number => {
return number * 2;
});
console.log(result);The result will be:
[2, 4, 6]
The map() method can be used inside JSX to create list
items.
function App() {
const students = [
"Rahul",
"Neha",
"Amit"
];
return (
<ul>
{students.map(student => (
<li key={student}>
{student}
</li>
))}
</ul>
);
}Numbers can also be rendered from an array.
function App() {
const numbers = [10, 20, 30, 40];
return (
<ul>
{numbers.map(number => (
<li key={number}>
{number}
</li>
))}
</ul>
);
}function Courses() {
const courses = [
"HTML",
"CSS",
"JavaScript",
"React"
];
return (
<div>
{courses.map(course => (
<p key={course}>
{course}
</p>
))}
</div>
);
}
A common pattern is to convert each array item into an
li element.
const fruits = [
"Apple",
"Banana",
"Mango"
];
function App() {
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>
{fruit}
</li>
))}
</ul>
);
}
When rendering lists, React uses a special key prop to
identify individual list items.
{students.map(student => (
<li key={student}>
{student}
</li>
))}The key should be unique among the items in the rendered list.
Keys help React determine which items have changed, been added, or been removed.
Real applications usually work with arrays of objects rather than simple strings.
const students = [
{
id: 1,
name: "Rahul",
course: "React"
},
{
id: 2,
name: "Neha",
course: "JavaScript"
}
];function StudentList() {
const students = [
{
id: 1,
name: "Rahul",
course: "React"
},
{
id: 2,
name: "Neha",
course: "JavaScript"
}
];
return (
<div>
{students.map(student => (
<div key={student.id}>
<h2>
{student.name}
</h2>
<p>
Course: {student.course}
</p>
</div>
))}
</div>
);
}When objects contain unique IDs, the ID is usually a suitable choice for the React key.
{students.map(student => (
<div key={student.id}>
{student.name}
</div>
))}Using a stable unique identifier helps React correctly track items.
function Courses() {
const courses = [
{
id: 1,
name: "React",
duration: "6 Months"
},
{
id: 2,
name: "Python",
duration: "6 Months"
}
];
return (
<div>
{courses.map(course => (
<div
className="card"
key={course.id}
>
<h2>
{course.name}
</h2>
<p>
{course.duration}
</p>
</div>
))}
</div>
);
}
The map() method can also be used to render reusable
React components.
function StudentCard({ name, course }) {
return (
<div>
<h2>
{name}
</h2>
<p>
{course}
</p>
</div>
);
}{students.map(student => (
<StudentCard
key={student.id}
name={student.name}
course={student.course}
/>
))}The complete object can also be passed to a child component.
function StudentCard({ student }) {
return (
<div>
<h2>
{student.name}
</h2>
<p>
{student.course}
</p>
</div>
);
}{students.map(student => (
<StudentCard
key={student.id}
student={student}
/>
))}Objects can contain arrays, and those arrays can also be rendered.
const student = {
name: "Rahul",
subjects: [
"HTML",
"CSS",
"React"
]
};{student.subjects.map(subject => (
<li key={subject}>
{subject}
</li>
))}
The map() callback can receive both the item and its
index.
const students = [
"Rahul",
"Neha",
"Amit"
];
{students.map((student, index) => (
<li key={student}>
{index + 1}. {student}
</li>
))}The index can be useful for displaying numbering.
The array index can technically be used as a key:
{students.map((student, index) => (
<li key={index}>
{student}
</li>
))}However, when list items can be reordered, inserted, or removed, using a stable unique ID is generally preferable.
The filter() method can be combined with
map() to display only selected items.
const students = [
{
id: 1,
name: "Rahul",
active: true
},
{
id: 2,
name: "Neha",
active: false
},
{
id: 3,
name: "Amit",
active: true
}
];
{students
.filter(student => student.active)
.map(student => (
<p key={student.id}>
{student.name}
</p>
))
}Data can be sorted before it is rendered.
const students = [
"Rahul",
"Amit",
"Neha"
];
const sortedStudents = [...students].sort();
{sortedStudents.map(student => (
<li key={student}>
{student}
</li>
))}Using a copied array avoids directly modifying the original array.
A list can be displayed conditionally when data is available.
function StudentList({ students }) {
if (students.length === 0) {
return (
<p>
No students found.
</p>
);
}
return (
<ul>
{students.map(student => (
<li key={student.id}>
{student.name}
</li>
))}
</ul>
);
}function Menu() {
const items = [
"Home",
"About",
"Courses",
"Contact"
];
return (
<nav>
{items.map(item => (
<a
href="#"
key={item}
>
{item}
</a>
))}
</nav>
);
}function Products() {
const products = [
{
id: 1,
name: "Laptop",
price: 50000
},
{
id: 2,
name: "Keyboard",
price: 1500
},
{
id: 3,
name: "Mouse",
price: 800
}
];
return (
<div>
{products.map(product => (
<div key={product.id}>
<h2>
{product.name}
</h2>
<p>
₹{product.price}
</p>
</div>
))}
</div>
);
}Lists are frequently created from data received from an API.
function Users({ users }) {
return (
<div>
{users.map(user => (
<div key={user.id}>
<h3>
{user.name}
</h3>
<p>
{user.email}
</p>
</div>
))}
</div>
);
}
A common mistake is forgetting the key when rendering a
list.
Incorrect:
{students.map(student => (
<li>
{student.name}
</li>
))}Better:
{students.map(student => (
<li key={student.id}>
{student.name}
</li>
))}A stable unique ID is generally a good choice when one is available.
Object properties can be destructured directly inside the
map() callback.
const students = [
{
id: 1,
name: "Rahul",
course: "React"
},
{
id: 2,
name: "Neha",
course: "Python"
}
];
{students.map(({ id, name, course }) => (
<div key={id}>
<h2>
{name}
</h2>
<p>
{course}
</p>
</div>
))}function CourseCard({ name, fee }) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Fee: ₹{fee}
</p>
</div>
);
}
function CourseList() {
const courses = [
{
id: 1,
name: "React",
fee: 10000
},
{
id: 2,
name: "Python",
fee: 8000
}
];
return (
<div>
{courses.map(course => (
<CourseCard
key={course.id}
name={course.name}
fee={course.fee}
/>
))}
</div>
);
}function StudentCard({
name,
course,
city
}) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Course: {course}
</p>
<p>
City: {city}
</p>
</div>
);
}
function App() {
const students = [
{
id: 1,
name: "Rahul",
course: "React",
city: "Patna"
},
{
id: 2,
name: "Neha",
course: "JavaScript",
city: "Delhi"
},
{
id: 3,
name: "Amit",
course: "Python",
city: "Mumbai"
}
];
return (
<div>
<h1>
Students
</h1>
{students.map(student => (
<StudentCard
key={student.id}
name={student.name}
course={student.course}
city={student.city}
/>
))}
</div>
);
}
export default App;
This example uses an array of objects, map(),
unique keys, props, and a reusable component to render student data.
map() to transform arrays into JSX.filter() when only selected items should be displayed.map() to render lists.key.filter() and map() can be combined for selective rendering.Question: Which JavaScript method is commonly used in React to render items from an array?