Scribd
Upload
2 views

React list and key

The document explains how to render lists in React using the map() method, emphasizing the importance of providing unique keys for list items to optimize rendering. It includes code examples demonstrating the creation of a Garage component with a list of cars and a GroceryList component with grocery items, both utilizing keys. The document highlights that keys help React identify which items have changed, are added, or are removed.

Uploaded by

vivekmohite104
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

React list and key

The document explains how to render lists in React using the map() method, emphasizing the importance of providing unique keys for list items to optimize rendering. It includes code examples demonstrating the creation of a Garage component with a list of cars and a GroceryList component with grocery items, both utilizing keys. The document highlights that keys help React identify which items have changed, are added, or are removed.

Uploaded by

vivekmohite104
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

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

import React from 'react';


import ReactDOM from 'react-dom/client';

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} />)}
</ul>
</>
);
}

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


root.render(<Garage />);

/*
If you run this example in your create-react-app,
you will receive a warning that there is no "key" provided for the list
items.
*/

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.
import React from 'react';
import ReactDOM from 'react-dom/client';

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 />);

Add the attribute that allows React to keep track of elements in lists.

function GroceryList() {
const items = [
{id: 1, name: 'bread'},
{id: 2, name: 'milk'},
{id: 3, name: 'eggs'}
];

return (
<>
<h1>Grocery List</h1>
<ul>
key
{items.map((item) => <li
={item.id}>{item.name}</li>)}
</ul>
</>
);
}

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<GroceryList />);

You might also like