Cannot read properties of undefined reading map

Most user interfaces have some kind of list. Whether it’s a display of data returned from an API or simply a drop-down list in a form, lists have become a cornerstone element in web applications. It is common to map over a set of data to render these lists, and bugs will inevitably occur.

As a result, the TypeError Cannot read property 'map' of undefined is very common and one of the first errors that developers will be confronted with. It occurs when the variable being executed is of a different type than expected. Recognizing the error and the root cause will save you valuable time in the long run.

In this article, you’ll learn about the TypeError Cannot read property 'map' of undefined, how it happens, how it can be fixed, and what you can do to mitigate this error in the future.

What Is the TypeError Cannot Read Property Map of Undefined

Frontend developers are accustomed to running into errors that prevent their applications from compiling or rendering properly. TypeErrors, in particular, are very common. These represent an error occurring because the value is of a different type than the one expected. It’s one of the most generic and common JavaScript errors that developers experience.

Understanding why they happen will reduce the time needed to debug and fix them. These errors will stop the execution of a program and, therefore, will be detrimental to the user experience if they are not dealt with - errors can cause an application or UI code to crash, resulting in an error pages, blank spaces or blank pages in your application.

How to Understand and Prevent the Error

In this section, you’ll discover what causes the TypeError Cannot read property 'map' of undefined and how to prevent it.

What Causes the Error

In JavaScript specific methods live under specific objects. For instance, String.prototype.split, or split for short, is a function that takes a string and divides it into substrings. It lives under the standard built-in object string and accepts nothing else. If you were to give anything other than a string to the split method, you would get a TypeError. Giving it null, for example, throws the TypeError Cannot read property 'map' of undefined.

This is what makes TypeErrors so common. They can happen any time a value or variable is used, assuming that value is one type when it is actually another.

In the case of map, this method lives on the Array prototype. So calling map on anything other than on an Array will throw a TypeError.

When Does the Error Occur

The TypeError Cannot read property 'map' of undefined occurs in the following situations:

Querying an API

In a perfect world, APIs would be consistent. They would always return the requested data in the desired format. In this scenario, they would be easy to parse and never change.

Unfortunately, in the real world, APIs can be inconsistent. The response might be in a different format than you expected, and if you don’t add some checks, your code could run into some issues.

Here is an example using Nationalize.io, an API predicting the nationality of a name passed as a parameter:

    // Working fine
    const name = 'marie'
    fetch(`https://api.nationalize.io/?name=${name}`)
      .then(res => res.json())
      .then(data => {
       // Data returned : { country: [{country_id: 'RE', probability: 0.0755}, ...], name: "marie"}
        data.country.map((country_details) => console.log(country_details))
    });

    // Throwing an error
    const emptyName = ''
    fetch(`https://api.nationalize.io/?name=${emptyName}`)
      .then(res => res.json())
      .then(data => {
       // Data returned: { error: "Missing 'name' parameter"}
       const { country } = data
       country.map((country_details) => console.log(country_details))
      // Throws TypeError cannot read property ‘map’ of undefined
    });

In the second fetch, there is no country key in the data object, making it undefined. Calling the map function on it throws a TypeError.

Typing Errors

Developers are humans and, therefore, make typos. Similar to the previous example, if you access a property that doesn’t exist on an object, the value will be undefined. Calling the map method will throw the TypeError Cannot read property 'map' of undefined:

    const library = {
      name: "Public library",
      books: [“JavaScript complete reference guide”]
    }
    // ‘bookss’ is not a property of library, so this will throw an error
    library.bookss.map(book => console.log(book))

Trying to Use a Variable Before It’s Set

It’s easy to make a call and forget to take into consideration whether it’s an asynchronous one. When a value is populated asynchronously, accessing it too early will result in an error, as the value might still be undefined:

    const fetchCountries = (name) => {
        fetch(`https://api.nationalize.io/?name=${name}`)
          .then(res => res.json())
          .then(data => {
            console.log(data)
            return data
          });
    }

    const name = 'marie'
    const countriesData = fetchCountries(name)
    console.log(countriesData)

The result of this code is the console logging on line 12 will execute before the fetch call is done and, therefore, before the one on line 5. At this point, countriesData is undefined, and calling map on it would throw an error:

The asynchronous aspect is something that React developers have to be particularly wary of. Children components will inherit data through props from their parents, but if the parent isn’t done fetching or computing the necessary data before the child starts rendering, this will also throw an error:

How to Mitigate the Error

The first thing you can do to mitigate this error is to use TypeScript. This strongly typed programming language will warn you ahead of time if you use an unacceptable type:

The second way you can mitigate the error is through conditional checks to ensure the value is available before trying to use it. It’s particularly helpful in React, wherein developers regularly use conditional rendering to avoid undefined variables.

Using the previous library and books example, here is a way to use conditional check and rendering but only when set:

    const BookList = ({books}) => {
      return(
        <div>
          {
            Array.isArray(books) && books.map(book => <div>{book.title}</div>) //Check if books is not null to map over it
          }
        </div>
      )
    }

    function App() {
      const books = getBooks(...) // asynchronous hook to grab the list of books
      return (
        <BookList books={books} />
      )
    }

    export default App;

The third solution is optional chaining. This simple operator will short-circuit and return undefined if you call a function on a property that doesn’t exist:

    const library = {
      name: "Public library"
    }
    // books is not a property of library, but with the ? operator, this only returns undefined
    library.books?.map(book => console.log(book))

Finally, you can wrap your call in a try-catch block. You can read more about try-catch here. In the case of API calls that may fail and return error messages, like the first example, you can also use a catch() after your then () function to handle errors.

For this situation, libraries such as Axios are preferred over fetch, as the latter will only throw an error on network issues and not on API errors (such as a 500). Axios, on the other hand, comes with error handling:

    const param = ''
    axios.get(`https://api.nationalize.io/?name=${param}`)
      .then(data => {
        // This will not get executed
        data.country.map((country_details: any) => console.log(country_details))
      })
       .catch(error => console.log(error));

You can read more about Axios vs. Fetch here.

Meticulous and TypeErrors

Meticulous is a tool to easily create UI tests without writing code and without requiring a staging environment. Use their CLI to open an instrumented browser which records your actions as you execute a workflow on your web app.

This sequence of actions can then be used to create a test, which will prevent regressions like TypeErrors. Meticulous captures a screenshot at the end of a replay. Screenshots can then be diffed in order to create a simple test. It's easy to integrate Meticulous tests into your continuous integration system, like GitHub Actions.

This allows you to detect regressions and prevent bugs from reaching production. For more information about Meticulous, don’t hesitate to check out the official docs.

Conclusion

JavaScript developers have to deal with many different kinds of errors. As you learned in this article, TypeErrors are one of the most common. You learned more about what they are, what a few possible causes are, and how to mitigate them.

Over the years, each developer builds a little toolkit of tips and tricks to help them accomplish their job quicker. Keeping in mind all the possible solutions listed in this article will speed up your development and reduce the time spent hunting bugs.

Authored by Marie Starck

How do you fix undefined properties Cannot be read?

How do you fix TypeError Cannot read properties of undefined reading map ')?

Can not read the property of undefined reading then?

How do I read a map in react JS?