ReactJS Error: Objects are not valid as a React child (found: [object Promise]) [duplicate]

Question

Having a nightmare trying to pull data from a weather API and display it in React but when I run my code I get an error:

"Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

My code is below:

export default function getWeatherFromApiAsync() {
  return fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric"
  )
    .then((response) => response.json())
    .then((responseJson) => {
      return (
        <div className="App">
          {responseJson.map((weather) => (
            <div>
              <h6> {weather.coord.lon}</h6>
            </div>
          ))}
        </div>
      );
    })
    .catch((error) => {
      console.error(error);
    });
}

Any help appreciated!

Answer 1

You can't render a default component from promise like that.

You can take a advantages of useState , useEffect hook to fetch and render data into the component.

You can learn more about React Hooks from this link.

And also your api response is a json object and you're trying to map over it.

Note: You can map over array type of data only.

Here is your working code of yours,

import { useEffect, useState } from "react";

const App = () => {
  const [data, setData] = useState({});
  useEffect(() => {
    const getWeatherFromApiAsync = async () => {
      const resopnse = await fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric"
      );
      const resopnseJson = await resopnse.json();
      console.log("json", resopnseJson);
      setData(resopnseJson);
    };
    getWeatherFromApiAsync();
  }, []);

  return (
    <div className="App">
      <h6>{data?.coord?.lon}</h6>
    </div>
  );
};

export default App;