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
