Map and Filter

Updated on 19 Feb 2025

In this chapter we will learn how to use filter and map to display data with React.

map is like a foreach loop in PHP except that map takes a callback function as a parameter.

PHP

foreach($records as $record) {
    //--do something with $record
    echo '<div key=' . $record['id'] . '>';
    echo '<h2>' . $record['name'] . '</h2>';
    echo '</div>';
}

JS

new_records = records.map(record => 
    //--do something with record
    <div key={record.id}>
        <h2>{record.name}</h2>
    </div>
)

map - basic example

Here is a basic example of displaying simple data with the map function.

Lets create an array of cities, and loop over them with the map function.

import React from 'react';

export default function Cities() {
    
    const cities = [
        "Wellington",
        "Auckland",
        "Christchurch",
        "Rotorua"
    ];

    const listItems = cities.map(city => <li>{city}</li>);

    return (
        <>
            <ul>{listItems}</ul>
        </>
    );

 }

However you will get a warning that you should have a unique key. Next section shows how to add a unique key.

Warning: Each child in a list should have a unique "key" prop

Displaying complex objects

We can display more complex data sets; one that is conducive to having a unique key plus other information.

const cities = [{
        id: 0,
        name: 'Wellington',
        island: 'North',
        population: 424441,
      }, {
        id: 1,
        name: 'Auckland',
        island: 'North',
        population: 1798300,
      }, {
        id: 2,
        name: 'Christchurch',
        island: 'South',
        population: 408000,
      }, {
        id: 3,
        name: 'Rotorua',
        island: 'North',
        population: 58800,  
}];

Now in our component code we can do this:

const listItems = cities.map(city => 
        <div key={city.id}>
            <h2>{city.name}</h2>
            <p>Population of {city.population} people</p>
        </div>
        
    );

return (
        <>
            {listItems}
        </>
);

Notice in this code we put the key in a div. This is necessary because the key needs to be part of the parent record. key would do nothing if we made the parent node anonymous and added it to the h2 tag - we’d get the same unique key warning as before.

Filtering

We can filter the data as well. Imagine that we only wanted records for the south island. First we provide a filter then we map over the filtered results.

const south_cities = cities.filter(city =>
  city.island === 'South'
);

const listItems = south_cities.map(city => 
        <div key={city.id}>
            <h2>{city.name}</h2>
            <p>Population of {city.population} people</p>
        </div>
        
    );

return (
        <>
            {listItems}
        </>
);

What we now get is a display of the cities in the south island.

Filter on Id

We might have some router code that looks like this:

<Route path="/cities" element={<Cities />} >
  <Route path=":cityId" element={<Cities />} />
</Route>

We would navigate to this page like so: http://localhost:5173/cities/2, in which case I want to retrieve and display the City that has Id 2. Notice in the code below, cityId is part of the Route path from above.

selectedCity = contacts.filter(city => city.id == cityId)[0]

Remember filter returns and array, even if it contains one city object. In almost all cases we want the first entry, which is indexed by 0.