4/2/25, 10:44 a.m.

React Lists

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

React Lists
❮ Previous Next ❯

In React, you will render lists with some type of loop.

The JavaScript map() array method is generally the preferred method.

If you need a refresher on the map() method, check out the ES6 section.

Example:
Let's render all of the cars from our garage:

function Car(props) {
return <li>I am a { props.brand }</li>;
}

function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}

https://www.w3schools.com/REACT/react_lists.asp 1/8
4/2/25, 10:44 a.m. React Lists

</ul>
 Tutorials 
</> Exercises  Services   Sign Up Log in
);
HTML
 } CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Run Example »

When you run this code in your create-react-app , it will work but you will receive a
warning that there is no "key" provided for the list items.

Get Certified!
school
w3 s

5
CE

02
TI 2
Complete the React modules, do the exercises, take the exam and become

R
FI .
ED

w3schools certified!!

$95 ENROLL

Keys
Keys allow React to keep track of elements. This way, if an item is updated or removed,
only that item will be re-rendered instead of the entire list.

Keys need to be unique to each sibling. But they can be duplicated globally.

Generally, the key should be a unique ID assigned to each item. As a last resort, you can
use the array index as a key.

https://www.w3schools.com/REACT/react_lists.asp 2/8
4/2/25, 10:44 a.m. React Lists

 Tutorials 
Example:
Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Let's refactor our previous example to include keys:

function Car(props) {
return <li>I am a { props.brand }</li>;
}

function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Run Example »

?
Exercise
Which statement is NOT correct:

Keys must be unique to each sibling.

Keys cannot be a number

https://www.w3schools.com/REACT/react_lists.asp 3/8
4/2/25, 10:44 a.m. React Lists

 Keys can
Tutorials 
beExercises
the array index Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Submit Answer »

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

ADVERTISEMENT

https://www.w3schools.com/REACT/react_lists.asp 4/8
4/2/25, 10:44 a.m. React Lists

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

https://www.w3schools.com/REACT/react_lists.asp 5/8
4/2/25, 10:44 a.m. React Lists

COLOR PICKER 
 Tutorials  Exercises  Services  Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C


ADVERTISEMENT

ADVERTISEMENT

https://www.w3schools.com/REACT/react_lists.asp 6/8
4/2/25, 10:44 a.m. React Lists

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

ADVERTISEMENT

 PLUS SPACES GET CERTIFIED

FOR TEACHERS FOR BUSINESS CONTACT US

Top Tutorials Top References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
https://www.w3schools.com/REACT/react_lists.asp 7/8
4/2/25, 10:44 a.m. React Lists
PHP Tutorial HTML Colors

 Java Tutorial
Tutorials 
C++ Tutorial
Exercises  Services  Java Reference

Angular Reference
Sign Up Log in
jQuery Tutorial jQuery Reference
HTML
 CSS TopJAVASCRIPT
Examples SQL PYTHON JAVA
Get PHP
Certified HOW TO W3.CSS C

HTML Examples HTML Certificate

CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of
use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

https://www.w3schools.com/REACT/react_lists.asp 8/8