TypeError: Cannot read properties of undefined (reading 'map') React JS

Question

I am facing the error TypeError: Cannot read properties of undefined (reading 'map')

This code should return the name of the city in a card title which is defined in my other file but throwing an error.

Codes:

import React, {Component} from 'react';
import Body from './Body';

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: [],
    };
  }

  async componentDidMount() {
    const url = `http://api.weatherapi.com/v1/current.json?key=${this.props.api}&q=Jaipur&aqi=no`;
    let data = await fetch(url);
    let parsedData = await data.json();
    this.setState({
      weather: parsedData.weather,
    });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          {this.state.weather.map((element) => {
            return (
              <div className="col-md-4">
                <Body city={element.location.name} />
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Weather;

What is the value of parsedData.weather that you are updating this.state.weather to? Is it an array? — Drew Reese
– Drew Reese, Commented Sep 29, 2021 at 4:41
yes this will store an array of all my weather details fetched from the api — Yatharth Singh
– Yatharth Singh, Commented Oct 1, 2021 at 5:40
Please show us the value of parsedData. From what I can tell, this.state.weather is a defined array on the initial render, so somehow after you fetch data and update state, this.state.weather is no longer defined. This is why you can't read .map or .length and an error is thrown. If I had your this.props.api value I'd just reproduce this myself and see what the response value is. — Drew Reese
– Drew Reese, Commented Oct 1, 2021 at 16:13

nima · Accepted Answer · 2021-10-16 12:24:03Z

The Problem:

your weather array is empty before the API call so using this.state.weather.map will cause the error.

The Solution:

There are two important things before using the map with arrayes:

check for the definition of the array (is the array defined and exists?)
check its length (is the array has some content?)

First

check its declaration/definition by a simple if statement:

{
  if(myArrayOfData) {
    myArrayOfData.map(
      // rest of the codes ...
    )
  }
}

Or with using ? shorthanded of if

{
  myArrayOfData?.map(
    // rest of the codes ...
  )
}

Second

check for the contents of the array and use the map function after checking its length (which tells you the data has arrived from the API call etc. and is ready to process)

{
  if(myArrayOfData) {
    if(myArrayOfData.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
    }
  }
}

Finally:

while the above snippet works properly, you can simplify it by checking both if conditions together:

{
  if(myArrayOfData?.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
  }
}

So, simply make some changes in the return of Weather component:

<div className="row">
  {
    if(this.state.weather?.length > 0) {
      this.state.weather.map((element) => {
        return (
          <div className="col-md-4" key={element.id}>  // also don't forget about the passing a unique value as key property
            <Body city={element.location.name}/>
          </div>
        );
      })
    }
  }
</div>

Optional:

In real-world examples, you may need to show some loading components while the data is fetching.

{
  if(myArrayOfData?.length > 0) {
    myArrayOfData.map(
      // rest of the codes ...
    )
  } else {
    <Loading />
  }
}

Be Aware

const anEmptyArray  = []

if(anEmptyArray){
  // rest of the codes ...
}

The result of comparison on if(anEmptyArray) is always true with an empty array.

Rohit Panchal · Accepted Answer · 2022-08-09 22:45:05Z

1

the simplest way is just to add "this.state.weather &&" before map method, first it will make sure that "this.state.weather" is defined and then run the code, example is below

{this.state.weather && this.state.weather.map((element) => {
            return (
              <div className="col-md-4">
                <Body city={element.location.name} />
              </div>
            );
})}

answered Aug 9, 2022 at 22:45

Rohit Panchal

111 bronze badge

Comments

Mochamad Faishal Amir · Accepted Answer · 2021-09-29 07:03:28Z

0

Lets make an assumption that parsedData.weather have correct data type. You should make a conditional logic, to check this.state.weather should have a value from API.

Here's an example

 render() {
    const { weather } = this.state; // Access the state `weather`
    return (
        <>
            <div className="container">
                <div className="row">
                     { /* This way use conditional ternary operator */ }
                    {weather.length ? weather.map((element) => {
                        return (
                            <div className="col-md-4">
                                <Body city={element.location.name}/>
                            </div>
                        );
                    }) : <span>Loading...</span>}
                </div>

            </div>
        </>
    );
}

answered Sep 29, 2021 at 7:03

Mochamad Faishal Amir

1028 bronze badges

4 Comments

Yatharth Singh Over a year ago

Thanks for the answer but it is raising a error that => TypeError: Cannot read properties of undefined (reading 'length') ;

Mochamad Faishal Amir Over a year ago

Yes I know it, but I mean the process is Asynchronous. So that's why the value is undefined

Yatharth Singh Over a year ago

how do fix that ??

Mochamad Faishal Amir Over a year ago

You must await asynchronous process, until you get the value. And then you can render the element

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'map') React JS

3 Answers 3

The Problem:

The Solution:

First

Second

Finally:

Optional:

Be Aware

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The Problem:

The Solution:

First

Second

Finally:

Optional:

Be Aware

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related