Passing object as prop returns undefined in destination component ReactJS-CodePudding

I'm trying to pass a JSON object (id) returned from an API call to another component via props and use that object(id) to fetch more data from a different endpoint. The problem is, when i pass the prop using object literal to the api, it gives an error undefined but when i console log the object(id) it works fine. What could be the issue? Just started learning React.

component passing object as prop

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Cast from "./Cast";

const DetailsView = () => {
  const { id } = useParams();
  const [details, setDetails] = useState([]);

  useEffect(() => {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/${id}?api_key=<<api_key>>&language=en-US`
      )
      .then((response) => {
        setDetails(response.data);
      });
  }, []);

  
  return (
    <div className="w-full h-[650px] text-white">
      <<bunch of code>>
        <Cast id={details?.id}/>
      </div>
      

    
  );
};

export default DetailsView;

component receiving prop

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

const Cast = (props) => {
  const [cast, setCast] = useState([]);
  const sid = props.id;

  useEffect(() => {
    
      axios
        .get(
          `https://api.themoviedb.org/3/movie/${sid}/credits?api_key=<<api_key>>&language=en-US`
        )
        .then((response) => {
          setCast(response.data.cast);
          console.log(response.data.cast);
        });

  }, []);

  console.log(sid);
  return (
    <div className="absolute">
      {cast && cast.map((item, index) => <p className="">{item.name}</p>)}
      <p>{sid}</p>
    </div>
  );
};

export default Cast;

It doesn't work initially but when I edit the code, since the change is happening live, it fetches the data but when I refresh the page, Axios reports an error 404

xhr.js:220 GET https://api.themoviedb.org/3/movie/**undefined**/credits?api_key=56fbaac7fd77013cc072d285a17ec005&language=en-US 404

CodePudding user response：

Your id property does not exist until the API call is completed, and there is a rerender after setDetails.

You can check if id exists and based on that render your Card component. Also, looks like details is an object not an array, so I changed the useState statement to reflect that.

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Cast from "./Cast";

const DetailsView = () => {
  const { id } = useParams();
  const [details, setDetails] = useState({});

  useEffect(() => {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/${id}?api_key=<<api_key>>&language=en-US`
      )
      .then((response) => {
        setDetails(response.data);
      });
  }, []);

  
  return (
    <div className="w-full h-[650px] text-white">
      <<bunch of code>>
        {details?.id && <Cast id={details?.id}/>}
      </div>
      

    
  );
};

export default DetailsView;