CODEWITHSUNDEEP
javascriptnode.jsreactjsaxios
Ayush
Ayush

Reputation: 49

objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children,

When i try to render this code it always show this message "objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.". Please help me how to fix this error.This app is any example of rest api. Thanks in advance

let arr = [];

function App() {
  let info = () => {
    return (axios
      .get(
        "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=10&hd=true"
      )
      .then((res) => {
        Object.entries(res).map((val, i) => {
          return (
            <div
              id="carouselExampleIndicators"
              className="carousel slide"
              data-bs-ride="carousel"
            >
              <div className="carousel-indicators"></div>
              <div className="carousel-inner">
                <div className="carousel-item active">
                  <img
                    src={res.data[i].hdurl}
                    className="d-block w-100"
                    alt="img"
                  ></img>
                  <br />
                </div>
              </div>
            </div>
          );
        });
      }))
  };

  return (
    <>
      <div className="container">{info()}</div>
    </>
  );
}

export default App;

Upvotes: 1

Views: 5117

Answers (1)

JS Chewy
JS Chewy

Reputation: 71

axios.get(...).then(...) returns a promise, which is what your info() function is returning. You need to find a way to get info() to return your desired JSX, not the promise.

Upvotes: 1

Related Questions