I can't get my API data to render with the map function React.js

Question

The API does not render and it says this.state.weather.map is not a function. I need help, I have tried different ways of mapping through but does not change the outcome. Any feedback?

import React from 'react';
import axios from 'axios';
              
export default class Weather extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      weather: []
    }
  }
                
  async componentDidMount(){
    axios.get("http://api.weatherapi.com/v1/current.json?key=?=nyc").then(res => {
      console.log(res);
      this.setState ({weather: res.data})
    });
  }

  renderWeather(){
    this.state.weather.map(weather => {
      return (
        <p>{weather.location.name}</p>
      )
    })
  }

  render () {
    return (
      <div>
        {this.renderWeather()}
      </div>
    )
  }
}

I tried returning the map also and it still said the same error- — Jorge Vasquez
– Jorge Vasquez, Commented Dec 25, 2020 at 17:34

Sunil Kumar · Accepted Answer · 2020-12-25 15:28:38Z

1

renderWeather(){
    return this.state.weather.map(weather => {
        return(
            <p>{weather.location.name}</p>
        )
    })
  }

you have missed the return statement inside the renderWeather function, above snippet works for you

answered Dec 25, 2020 at 15:28

Sunil Kumar

4204 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jorge Vasquez Over a year ago

I tried returning the map also and it still said the same error-- this.state.weather.map is not a function. I wonder what else could work ? thanks

Sunil Kumar Over a year ago

check the API response, it supposed to return data in array format

Jorge Vasquez Over a year ago

Yup the API is logged in the console as array of objects, still not working.

Jorge Vasquez Over a year ago

Unhandled Rejection (TypeError): this.state.weather.map is not a function. That is the exact error message I am getting now.

Sunil Kumar Over a year ago

console.log(this.state.weather); just before the return statement and check what is the format, it must be an array format

|

Patrick · Accepted Answer · 2020-12-25 22:48:28Z

0

The API returns JSON.

this.setState ({weather: res.data})

Check the typeof res.data. Is is probably not an array but an object, hence this.state.weather.map is not a function, because Array.map() is an array method.

Make sure that you set the state properly to an array and it should work just fine..

edited Dec 25, 2020 at 22:48

answered Dec 25, 2020 at 20:45

Patrick

3772 silver badges8 bronze badges

4 Comments

Jorge Vasquez Over a year ago

Yes you are right. I just checked it returned Object, any idea on how to change it to an array? Thanks all.

Patrick Over a year ago

You could use Object.values() to get an array of all values in the object. Check the documentation on MDN. Depending on what you want to do with your data you might also want to check out Object.keys() or Object.entries().

Jorge Vasquez Over a year ago

I changed my code to this.setState ([{weather: Object.entries(res.data)}]) and it still was not able to convert it fully to an array, I also tried object.key and object.values and it did not work still. This is the hardest API I have ever worked with lol .

Jorge Vasquez Over a year ago

However I was at least able to get it to look like this in the console - 0: (2) ["data", {…}]

Collectives™ on Stack Overflow

I can't get my API data to render with the map function React.js

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related