Question 138742 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can I use Reactjs to fetch data from NasaApi?

import { useEffect,useState } from "react";
export default function NasaApi(){
    const[mars,setMars]=useState();
    useEffect(()=>{
        fetch('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY')
        .then(response=>response.json())
        .then(data=>{
            setMars(data)
        })
    },[])
    return(
        <div className="container-fluid">
            <h2>Mars Photos</h2>
            <table className="table table-hover">
                <thead>
                   <tr>
                   <th>Id</th>
                    <th>Camer_full_name</th>
                    <th>rover name</th>
                    <th>preview</th>
                   </tr>
                </thead>
                <tbody>
                    {
                     mars.photos.map(photo=><tr>
                        <td>{photo.id}</td>
                        </tr>)
                    }
                </tbody>
            </table>
        </div>
    )
}

i am get getting runtime error
Cannot read properties of undefined (reading ‘photos’)
TypeError: Cannot read properties of undefined (reading ‘photos’)

Tags:

2

Answers


  1. 0

    As your state does not have a default value, when your page first renders it will attempt to map a property of an undefined value.

    {
    mars.photos.map(photo => <tr>
        <td>{photo.id}</td>
    </tr>)
}

    In order to ensure that it has something to map before the response from the API is obtained, you should either check if object exists or provide a default value.

    Checking if object exists

    {
    mars && mars.photos.map(photo => <tr>
        <td>{photo.id}</td>
    </tr>)
}

    Providing default value

    const[mars, setMars] = useState({photos: []});
    Login or Signup to reply.
  2. 0 
    import { useEffect, useState } from "react";
export default function NasaApi() {
  const [mars, setMars] = useState();
  useEffect(() => {
    fetch(
      "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY"
    )
      .then((response) => response.json())
      .then((data) => {
        setMars(data);
      });
  }, []);
  if (!mars) return <>loading</>; // <--- return loading if no data yet
  return (
    <div className="container-fluid">
      <h2>Mars Photos</h2>
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Id</th>
            <th>Camer_full_name</th>
            <th>rover name</th>
            <th>preview</th>
          </tr>
        </thead>
        <tbody>
          {mars.photos.map((photo) => (
            <tr>
              <td>{photo.id}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search