DEV Community: DAZ

How to use Array.map to render a list of items in React

DAZ — Sat, 17 Dec 2022 16:12:22 +0000

One of the most common tasks for React developers is to render a list of data (e.g. users) onto a web page. And thanks to the the Array.map method this can be done in a simple and efficient way. In this article, you'll learn how JSX helps to make components in React as close to HTML as possible while still allowing you to write some JavaScript.

Let's start by looking at how to use JSX to render dynamic data to the page using React. If you want to insert a dynamic value into the HTML you can place an expression inside curly braces like so:

<h1>Hello {name}!</h1>

This is all fairly straightforward, but eventually you'll run into a situation where you want to insert a list of data into a component. Lists of data are fairly common in websites and apps, for example:

lists of tweets on Twitter
playlists of videos on YouTube
lists of photos on Instagram for example

And when you need to display insert a list of values in React, the Array.map function will become your new best friend!

Why not use for loops instead of map? 🤔

The reason for this is that you can't use for loops in JSX. This is because anything inside the curly braces in a component has to be an expression: which means you can't use imperative statements like for or if. But don't worry, JavaScript arrays have some powerful methods that will help you transform the data into a value that can be inserted directly into components.

How does map work?

Array.map works in a similar way as a mathematical function.

Take a look at the diagram below (from Maths Is Fun). It's a mathematical function mapping one set of numbers on the left, to another set of numbers on the right. The mapping is applying a rule to each number. Can you figure out what this rule is?

Hopefully you figured out that the rule is to square the number on the left (i.e. multiply it by itself) to get the number on the right. In mathematical notation, this would be written as:

n → n²

(note how similar this looks to an arrow function in JavaScript by the way).

An array of values in JavaScript can be thought of as the sets of numbers used in the example above. The Array.map function allows us to apply the same function to everyvalue in an array and produce a new array containing the results. Each value in the original array maps to a corresponding value in the new array.

For example, consider the following array of purple shapes. If we apply the mapping function 'make green' to it then every shape in the original array gets mapped to a green-colored shape in the new array.

In a similar way, applying the 'make love' function to the following array of shapes will return an array where every element in the original array has been mapped to a love heart of the same color:

The Array.map method works in the same way as a mathematical function. It iterates over the array that calls the method and returns a new array, with each value from the calling array mapped to a corresponding new value, based on a mapping function.

For example, the following mapping function would double every number:

const double = n => 2 * n

The mapping function is provided as an argument to the Array.mapmethod. Functions that are provided as an argument are often referred to as callbacks. The fact that Array.map accepts a function as an argument means that it is a higher order function, which is any function that accepts another function as an argument or returns a function.

Another important point is that the Array.map method doesn't mutate the original array that calls it. It returns a completely new array of new values and leaves the original array unchanged.

This ability to map each item in an array to a new value without changing the underlying structure of the array means that JavaScript arrays are examples of a functor.

Array.map examples

Let's take a look at some examples of using the Array.map method in JavaScript.

Mapping numbers

First of all, let's create an array of numbers that we can apply these mapping functions to:

const numbers = [1, 2, 3, 4, 5]

Now let's define some mapping functions that can be used to map one value to another:

const increment = n => n + 1
const double = n => 2 * n
const square = n => n * n

Here we have three mapping functions:

increment returns the next number after the argument
double returns the argument multiplied by 2
square returns the argument multiplied by itself

Let's have a go at using them:

numbers.map(increment)

// result [2,3,4,5,6]

As you can see, when the increment mapping function is provided as an argument, the array that is returned has the same number of elements as the numbers array, but each corresponding value has been incremented by one.

We can also confirm that the numbers array hasn't been changed by the operation:

numbers

// result [1, 2, 3, 4, 5]

If we provide the double mapping function as an argument, it will return an array where each value is twice as big as the corresponding value in the numbers array:

numbers.map(double)

// result [2, 4, 6, 8, 10]

Since the Array.map method returns a new array, it's often helpful to assign the returned value to a variable. For example, we can provide the square mapping function as an argument to the numbersarray, which will return a new array that correspond to the square numbers, so it makes sense to assign the return value to the variable squareNumbers:

const squareNumbers = numbers.map(square)

// result [1, 4, 9, 16, 25]

If we don't have a named mapping function that performs the operation we need, we can provide an anonymous function as an argument. The following example will subtract each value in the numbers array from 10:

numbers.map(n => 10 - n)

// result [9, 8, 7, 6, 5]

We can also chain mappings together and apply two functions to each value in the numbers array:

numbers.map(double).map(increment)

// result [3, 5, 7, 9, 11]

This will double all the numbers and add one to them all. However, this is an example of just because you can do something, doesn't mean you should. If you want to double the numbers then add one, it would be much more efficient to write a new mapping function that does this instead of applying the Array.map method twice. This is because every time you use the Array.map method, you loop over the array, so applying it twice will result in two passes of the array. This isn't much of a problem when the array isn't very long, but in reality you may be dealing with huge sets of data and should try and limit the number of times you loop over the array.

Mapping strings

We can also use the Array.map method to transform an array of strings. To demonstrate this, let's create an array called words:

const words = ["hello","world"]

And let's create a mapping function that accepts a string as an argument and returns that string written in reverse:

 const reverse = string => [...string].reverse().join()

Providing the reverse mapping function as an argument to words.map will return a new array with each word written backwards:

words.map(reverse)

// result ["olleH", "dlroW"]

We can also use built-in string methods by providing an anonymous function as a callback that calls the method we want on each string in the array. In the following example, we call the toUpperCase string method on each word in the array:

words.map(word => word.toUpperCase())

// result ["HELLO", "WORLD"]

This returns a new array with each word written in capital letters.

A common pattern when mapping over strings is to insert them into HTML tags. For example, we could wrap heading tags around the words using the following mapping function:

const makeHeading = text => <h1>${text}</h1>

If we provide the makeHeading function as an argument to the mapping over the words array, it will return an array of HTML:

This HTML can then be inserted into a web page.

Mapping objects

We can also use Array.map to extract information from a list of objects. For example, we could have a list of objects that describe different types of fruit, something like this:

const fruits = [
    { name: "Apple"
      price: 25
      emoji: "🍏"
    },
    { name: "Banana"
      price: 40
      emoji: "🍌"
    },
    { name: "Melon"
      price: 75
      emoji: "🍉"
    },
]

The first thing we can do is extract all the values of a specific property from each object. For example, if we only wanted to see the emojiproperty, we could use the following code:

fruits.map(fruit => fruit.emoji)

// result  ["🍏","🍌","🍉"]

This maps each object to a single value that corresponds to the emoji property of each object.

We can also map over an array of objects to create a string of HTML based on the object's values. The following code will create a list item based on each object in the fruits array:

const fruitList = fruit.map(
    fruit => `<li>${fruit.emoji} ${fruit.name}, ${fruit.price}c each</li>`)

This will return the following array of HTML:

["<li>🍏 Apple, 25c each</li>","<li>🍌 Banana, 40 each</li>","<li>🍉 Melon, 75c each</li>"]

This example shows how you can take a load of data stored in an array of objects and use map to create an array of HTML. This is the foundation of using Array.map to create JSX code that can be used in React components.

Using map in React

The Array.map function comes into its own when we need to insert a list of data from an array into a JSX component. Let's take a look at a simple example using this array of super heroes:

const heroes = ["Superman", "Batman", "Wonder Woman"]

We can create a component that uses Array.map to iterate over each super hero in the heroes array and create a level-1 heading containing the name of each super hero:

const Headings = () => {
  const headings = heroes.map((hero, index)=>
    <h1 key={index}>{hero}</h1>)
  return <header>{headings}</header>
}

The return value of Array.map is stored in the variable headings. This can now be inserted as an expression into the return value of the the Headings component. Each element in the heroes array will then be rendered as a heading.

You can see this example on CodePen.

This example shows how easy it is to use Array.map to display a list of data using a single line of code.

Using keys

An important point to remember when using Array.map to create a list of items in React is that you must provide a key prop. This is used by React in the background to keep track of the order of the items in the list. It becomes particularly important if the items in the list are likely to change order or if items are added or removed from the list.

React uses a virtual DOM to keep track of any changes that are made and keys are important in making sure that these changes are as rendered in the most efficient way possible.

An easy way to create a key prop is to use the index of the array:

const Headings = () => {
    const headings = heroes.map((hero,index) => <h1 key={index}>{hero}</h1>)
    return <header>{headings}</header>
}

This is not best practice however, as the index of each element will change if the underlying data changes and won't help the virtual DOM keep track of any changes.

Ideally each element needs to use a unique value as its key prop. Thankfully most data provided by a database or API usually comes with unique IDs that we can use as the key prop.

Lists of objects

Let's finish off by looking at a more realistic example where you have an array of objects that have been pulled from a database or external API. For example, the following list of coding books:

const books = [
  { id: "B09123N2QN",
   title: "Learn To Code With JavaScript",
   author: "Darren Jones",
   price: 2260,
   pages: 425,
   cover: "https://m.media-amazon.com/images/I/412KSS+3fjL._SX260_.jpg",
   keywords: ["coding", "javascript", "beginner"]
 },
  { id: "B088P9Q6BB",
   title: "JavaScript: The Definitive Guide",
   author: "David Flanagan",
   price: 2399,
   pages: 708,
   cover: "https://m.media-amazon.com/images/I/51wijnc-Y8L._SX260_.jpg",
   keywords: ["rhino", "javascript", "mastery"]
 },
  { id: "B07C96Q217",
   title: "Eloquent JavaScript",
   author: "Marijn Haverbeke",
   price: 1994,
   pages: 474,
   cover: "https://m.media-amazon.com/images/I/51-5ZXYtcML.jpg",
   keywords: ["eloquent", "javascript", "modern"]
 },
]

If we wanted to display a list of books, showing the title and cover, we could create a Book component that returned the JSX we required:

const Book = ({id,title,cover}) =>
  <li key={id}>
    <h2>{title}</h2>
    <img alt={`cover of ${title}`} src={cover} />
  </li>

This takes the book object and uses destructuring in the parameter list to extract the id, title and cover properties. These are then used to return a list item that displays the title as a level-1 heading and the cover of the book as an image.

Now we can create a BookList component that uses Array.map to create a list of books by using the Book function as the mapping function that is provided as an argument:

const BookList = () =>
    <div>
      <h1>Books</h1>
      <ul>
        {books.map(Book)}
      </ul>
    </div>

The BookList component creates a container <div> and heading and then provides the <ul> elements to contain the list of books. We then use Array.map to loop over the list of books and insert a Book component in place of each value in the booksarray.

You can see this example on CodePen.

Limiting the list

This is fine in this case as the books array only contains 3 books, but in reality an API might return hundreds of book objects, so how can you limit the number of books that are displayed using the mapmethod? It's actually quite straightforward, you can just use the slice method to cut the array down to size, for example, if you only want to display the first 2 books, you can update the BookListcomponent to the following:

const BookList = ({n}) =>
    <div>
      <h1>Books</h1>
      <ul>
        {books.slice(0,n).map(Book)}
      </ul>
    </div>

It's much better to slice the array before applying the map function as avoids the whole of the books array being iterated over.

We can make the BookList component a bit more general by providing the number of books to display in the list as a prop, to the component:

const BookList = ({n}) =>
    <div>
      <h1>Books</h1>
      <ul>
        {books.slice(0,n).map(Book)}
      </ul>
    </div>

Now we can choose the value of n that will determine the number of books displayed in the list. This is called when we render the BookList component, like so:

ReactDOM.render(<BookList n={2} />, document.getElementById("root"))

Displaying data in a table

The last example used map to create an unordered list of items, which is an obvious way to present data from an array, but we can also use it to iterate over data and present it in other ways as well, for example we could create a table to display all the information about our books array:

const BookRow = ({id,title,author,price,pages}) =>
  <tr key={id}>
    <td>{title}</td>
    <td>{author}</td>
    <td>{pages}</td>
    <td>£{price/100}</td>
  </tr>

Then we can create the actual table to hold all these rows:

const BookTable = () =>
    <div>
      <h1>Books</h1>
      <table>
        <thead>
          <th>Title</th>
          <th>Author</th>
          <th>Number of Pages</th>
          <th>Price</th>
        </thead>
        <tbody>
        {books.map(BookRow)}
        </tbody>
      </table>
    </div>

This sets up the table and table headings and then after the heading row, we use Array.map to map over each book in the booksarray and pass it to the BookRowcomponent. This has the effect of creating a new row for every element in the booksarray.

You can see this example on CodePen.

Creating a nested list

Sometimes an array will contain objects that also contain arrays as properties. These might need to be mapped over as well in order to display them using JSX. In this case we can create a nested map statement.

For example, our books array contains a property called keywords which is an array of key words about each book. What if we wanted to display the title of each book with its keywords listed underneath like tags?

First of all we could create Tag component:

const Tag = word =>
  <div className="tag">{word}</div>

Then we create a Book component, similar to the one we used earlier:

const Book = ({id,title,keywords}) =>
  <li key={id}>
    <h2>{title}</h2>
  <div>{keywords.map(Tag)}</div>
  </li>

This time we use Array.map again map over the keywords array, which will insert a new Tag component inside a <div> element for each keyword in the array.

Last of all we need a BookList component that will map over the books array and create a list of Book components (this component is exactly the same as the one we used earlier):

const BookList = ({n}) =>
    <div>
      <h1>Books</h1>
      <ul>
        {books.slice(0,n).map(Book)}
      </ul>
    </div>

You can see an example on CodePen.

We can see here that the Array.map in the BookListcomponent iterates over the books array and then the Array.map in the Book component iterates over every element in the keywords property of every element in the books array.

The verdict

The Array.map method is a powerful higher-order function that lets you transform all the values in an array using a mapping function. This is especially useful for inserting a list of data into a React app, since you can't use for loops. It lets you replace elements in an array with a component based on the data in the array. When dealing with data that will change, it is important that you provide a unique keyprop for each component in the list. Once you've got the hang of using the Array.mapmethod to display lists of data into React, you'll wonder how you ever managed without it!

How to use Array.filter to narrow down a list in React

DAZ — Sat, 17 Dec 2022 15:59:18 +0000

How do you filter lists of data based on some user input? This is easily done using the Array.filter method!

How Does `Array.filter` Work? 🤔

The Array.filter method takes an array of items and returns a completely new array that only contains the elements from the original array that match certain conditions. The original array is not changed at all, making this a non-destructive operation.

Now we're going to look at the most important concept in this post: The conditions are provided by a predicate functionwhich might sound complicated, but is really just a fancy name for a function that returns either true or false based on certain conditions.

A predicate function is is provided as an argument to the Array.filter method.. If it returns true then the element will be in the returned array. If it returns false then the element will not be included in the returned array.

For example applying the predicate function isPurple to this array of shapes will result in a new array containing only the purple shapes from the original array:

In the next example, applying the predicate function isRound to the array of shapes will result in a new array containing all the circles that were in the original array:

Let's have a quick look at some code that will filter the following array of numbers:

Simplest possible filter example

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

First of all, we need a predicate function. The following isEven function will return true if the number provided as an argument is even and false otherwise:

const isEven = number => number % 2 === 0

Now you know what isEven does, can you predict what the following code will return?

numbers.filter(isEven)

If you guessed that only the even numbers in the numbers array will be returned then congratulations, you were absolutely right:

[2, 4, 6, 8, 10]

Now let's look at a more real-world example in React that takes an array of exam results and filters them to find out which marks got a distinction and which failed.

Filter list in React

First of all, we need to create a variable to store the exam results (these are just a list of random marks out of 100, feel free to make your own up):


const testResults = [56, 68, 100, 75, 85, 76, 45, 83, 38, 45, 67]

Next we need to create predicate functions for filtering out the marks that failed the exam and the marks that get a distinction. Getting less than 40% is a fail and getting 85% or more is a distinction. Each predicate function accepts the mark as the only parameter and returns the Boolean result of checking if the mark is less than 40 or greater than or equal to 85:

const fail = mark => mark < 40
const distinction = mark => mark >= 85

To display a list of all the marks we will use the following App component:

const App = ({results}) =>
  <div>
    <h1>Distinctions</h1>
    <div>{results.filter(distinction).join(",")}</div>
    <h1>Fails</h1>
    <div>{results.filter(fail).join(",")}</div>
  </div>

The important lines here are where we use Array.filter to only display the marks that have achieved the distinction and fail marks:

<div>{results.filter(distinction).join(",")}</div>
<div>{results.filter(fail).join(",")}</div>

As you can see, it's as simple as calling the filter method with the relevant predicate function to filter the results array and leave just the results we want. We also use the join method to display a string with each result joined by a comma. In the later examples we will use [Array.map](<http://Array.map>) to add some JSX to each element.

You can see this example on CodePen.

Note that this technique should only be used if you are filtering a list of data dynamically based on user input, otherwise you should really apply the filter at the point when you actually get the data from the database or API as this will save you having to fetch large amounts of data that you're not actually going to use.

Filtering With Hooks

Next we're going to expand on the previous example by using React's hooks to add some buttons to filter the test results.

This example is quite similar to the last one, but with a few changes that we'll discuss:

const testResults = [56, 68, 100, 75, 85, 76, 45, 83, 38, 45, 67]

const App = ({results}) => {
  const [level, setLevel] = useState("distinction")
  const checkResults = mark => level === "distinction" ? mark > 85 : mark < 40
  return <div>
    <button onClick={e => setLevel("distinction")}>Distinctions</button>
    <button onClick={e => setLevel("fail")}>Fails</button>
    <h1>Test Marks</h1>
    <div>{results.join(",")}</div>
    <h1>{level === "distinction" ? "Distinctions" : "Fails"}</h1>
    <div>{results.filter(checkResults).join(",")}</div>
    </div>
}

ReactDOM.render(<App results={testResults} />, document.getElementById("root"))

First of all, we use the useState hook to set a variable called level and give it a default value of "distinction":

const [level, setLevel] = useState("distinction")

This will be used to track whether or not we want look at the distinction or fail results.

Next we create the predicate function that we'll use to filter the results:

const checkResults = mark => level === "distinction" ? mark > 85 : mark < 40

This is a combination of the two predicate functions we used last time. We use a ternary operator to check if the level is set to "distinction" and if it is, we filter marks that are over 85, if not then we must be looking for "fail" marks so filter marks below 40.

In the JSX that is returned, we need to add a couple of buttons

<button onClick={e => setLevel("distinction")}>Distinctions</button>
<button onClick={e => setLevel("fail")}>Fails</button>

These both use the setLevel method to update the value of level to "distinction" or "fail" depending on which button is pressed.

Next we just display all the results in a comma-separated list:

<h1>Test Marks</h1>
<div>{results.join(",")}</div>

Then we display the filtered results and use a ternary operator to create a heading that says "Distinctions" or "Fails" based on the value of level:

<h1>{level === "distinction" ? "Distinctions" : "Fails"}</h1>
<div>{results.filter(checkResults).join(",")}</div>

You can see this on CodePen:

Filtering Strings As You Type

Now let's take a look at how you might filter strings. A common feature of large lists of data is to allow users to search the list and filter it as they type. Let's use Array.filter to implement this functionality.

The code to do this can be seen below:

const App = () => {
  const languages = ["JavaScript","Python","C","C++","C#","Swift","Java","Ruby","Haskell"]
  const [searchString, setSearchString] = useState()
  const startsWith = str => word => str ? word.slice(0,str.length).toLowerCase() === str.toLowerCase() : true

  return <div>
           <input onChange={e => setSearchString(e.target.value)} />
           <ul>
            {languages.filter(startsWith(searchString)).map(lang => <li>{lang}</li>)}
           </ul>
         </div>
}

Let's break down how this works.

First of all, we create a list of programming languages that we'll be displaying and filtering (feel free to add any more!):

Next we use the useState hook to store a variable called searchString. This will be the string that the user enters and is used to filter the languages by only displaying languages include that string::

const [searchString, setSearchString] = useState()

Then we need a predicate function to do the filtering:

const contains = str => word => str ? word.toLowerCase().includes(str.toLowerCase()) : true

Here we use the includes method to check if the searchString is included in each word. We convert both strings to lowercase so that we don't need to worry about the case matching. If the searchString is in included in the string then we'll keep the string in the new array, if not, it will be filtered out. If there isn't a search string, then this predicate function will just return true, meaning that every element in the original array will remain.

Last of all, we just need to return the JSX for the view:

return <div>
           <input onChange={e => setSearchString(e.target.value)} />
           <div>
            {languages.filter(contains(searchString)).join(",")}
           </div>
        </div>

Here we use an input element with an onChange event listener that will fire every time anything is entered into the input box. When this happens, the value of the searchString is updated to whatever is inside the input element and this is passed to the contains function to create a predicate function that will filter the array.

The example can be seen on CodePen, have a play around with it to see how it works!

Filtering Objects

As we know, most data that we'll end up using will be stored as objects. These can be filtered just as easily as numbers and strings using predicate functions. Let's create an array of objects to filter:

const people = [{
        emoji: "🤶",
        hat: true,
        glasses: true
    },
    {
        emoji: "🤴",
        hat: true,
        glasses: false
    },
    {
        emoji: "👩‍🍳",
        hat: true,
        glasses: false
    },
    {
        emoji: "👷‍♀️",
        hat: true,
        glasses: false
    },
    {
        emoji: "👴",
        hat: false,
        glasses: true
    },
    {
        emoji: "👵",
        hat: false,
        glasses: true
    },
    {
        emoji: "👩‍🔬",
        hat: false,
        glasses: true
    },
    {
        emoji: "👦",
        hat: false,
        glasses: false
    },
    {
        emoji: "👩‍🔧",
        hat: false,
        glasses: false
    },
    {
        emoji: "👩‍🦰",
        hat: false,
        glasses: false
    }
]

This array contains a number of objects that contain an emoji property and two other Boolean properties called hat and glasses that describe whether or not the emoji wears a hat and glasses respectively.

First of all, we'll add a filter to display only the emojis that are wearing hats.

We'll use the setState hook to do this:

const [hat, setHat] = useState(true)

For example, if hat is true, then we only want to display the emojis that are wearing a hat.

In order to allow the user to change the state, we'll add a button that changes the value of the hat variable:

<button onClick={e => setHat(!hat)} className={hat ? "active" : null}>Hat</button>

Clicking on these buttons will flip the Boolean value of hat, so if it is true it will be set to false and vice versa.

Last of all, we just need to apply Array.filter in order to filter based on the value of hat :

<ul>
  {people.filter(person => person.hat === hat).map(person => <li>{person.emoji}</li>)}
</ul>

Note that this example also uses [Array.map](<http://Array.map>) to make sure that we only display the "emoji" property of the object as an HTML list-item. You can read more about how to do this here.

Clicking on the button will alternate the display between showing a filtered list of emojis wearing hats and not wearing hats.

You can see this example on CodePen.

Multiple Filters

For our last example, we're going to expand on the previous example to demonstrate how to filter multiple items at once. We'll do this by adding a second button that will add a filter based on whether the emojis are wearing glasses or not. This was another Boolean property that was in each object.

First of all we need to use the setState hook to add another variable to track the state of whether the emoji has glasses or not. This follows the same pattern we used earlier for whether or not they were wearing a hat:

const [glasses, setGlasses] = useState(true)

Then we need to add a button that will toggle the Boolean value of glasses:

<button onClick={e => setGlasses(!glasses)} className={glasses ? "active" : null}>Glasses</button>

Now we chain two filters one after the other to first check if the emoji is wearing a hat and then to check if they are wearing glasses or not:

<ul>
   {people.filter(person => person.hat === hat).filter(person => person.glasses === glasses).map(person => <li>{person.emoji}</li>)}
</ul>

This filter starts and ends in the same way as earlier, but we have chained the following filter into the middle of the expression:

filter(person => person.glasses === glasses)

This means that first of all we will filter the list of objects based on the value of hatthen we filter this new list based on the value of glasses. The result is a list that matches both the states of the hat and glasses variables.

This process of chaining multiple filters together works - if you make hat and glasses both true, then you will only see any emojis that are wearing a hat and glasses. This method can become inefficient however, especially with large amounts of data and even more Boolean conditions. The reason for this is that the original list needs to be iterated over for every filter method. This means that you might have to go through a large list of objects multiple times, which could become inefficient and slow things down.

A much better way to achieve the same result is to use a single filter with the logical AND operator, &&. This will apply multiple predicates in a single filter. The example above can be rewritten more efficiently in the following way:

<ul>
  {people.filter(person => person.hat === hat && person.glasses === glasses).map(person => <li>{person.emoji}</li>)}
</ul>

This will still work in the same way, but only pass over the original array once to filter and then one more time to map each object to a string of HTML - much more efficient!

You can see this on CodePen.

The Verdict

The Array.filter method can be used to filter values in a list based on a given rule. This lets you filter data dynamically based on user input. In this post, we've looked at the different ways to use this method effectively with numbers, strings and objects as well as how to apply multiple filters all at once. I hope you've found this useful and can start using filters in your code today!

DEV Community: DAZ

How to use Array.map to render a list of items in React

Why not use for loops instead of map? 🤔

How does map work?

Array.map examples

Mapping numbers

Mapping strings

Mapping objects

Using map in React

Using keys

Lists of objects

Limiting the list

Displaying data in a table

Creating a nested list

The verdict

How to use Array.filter to narrow down a list in React

How Does Array.filter Work? 🤔

Simplest possible filter example

Filter list in React

Filtering With Hooks

Filtering Strings As You Type

Filtering Objects

Multiple Filters

The Verdict

How Does `Array.filter` Work? 🤔