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

Reactjs – Trying to fetch data from spaceX API

unable to fetch data, it gave me an error that apiData is not a function. Could not understand what’s the issue. Can anyone help?

const Mission = () => {
  const [apiData, setList] = useState([]);
  const [rocketData, setRocketData] = useState(null);

  const fetchData = async () => {
    try {
      const res = await fetch("https://api.spacexdata.com/v3/missions/F3364BF");
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await res.json();
      setList(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleClick = (mission) => {
    setRocketData(mission);
  };

  return (
    <div>
      {apiData.map((mission, index) => (
        <div key={index} onClick={() => handleClick(mission)}>
          <p>{mission.mission_name}</p>
          <p>{mission.mission_id}</p>
          <p>{mission.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Mission;

I tried some other variations but not luck.
Hope someone can help, thanks in advance.

Tags:

2

Answers


  1. 0

    The problem is from the api url that you have passed into fetch. The current api returns a single mission object. You’re getting the error because you’re calling map on an object. If you want to fetch all the missions you should change your api url to:

    fetch("https://api.spacexdata.com/v3/missions")

    This should fix your issue.

    Login or Signup to reply.
  2. 0

    apiData is not a function," occurs because apiData is an array state, not a function. However, in your code, the issue lies in how you’re trying to use apiData.

    Make sure that the data you’re trying to fetch is actually an array, or adjust the state handling accordingly.
    and Rename setList to setApiData for clarity.

    corrected version of your component.

    import React, { useState, useEffect } from "react";

const Mission = () => {
  const [apiData, setApiData] = useState([]);
  const [rocketData, setRocketData] = useState(null);

  const fetchData = async () => {
    try {
      const res = await fetch("https://api.spacexdata.com/v3/missions/F3364BF");
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await res.json();
      setApiData(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleClick = (mission) => {
    setRocketData(mission);
  };

  return (
    <div>
      {Array.isArray(apiData) ? (
        apiData.map((mission, index) => (
          <div key={index} onClick={() => handleClick(mission)}>
            <p>{mission.mission_name}</p>
            <p>{mission.mission_id}</p>
            <p>{mission.description}</p>
          </div>
        ))
      ) : (
        <p>No data available</p>
      )}
    </div>
  );
};

export default Mission;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search