ReactJS - Undefined when accessing data from API

Question

everyone, and thank you in advance to this great community.

I have created a Web app with ReactJS that gets a JSON from a API, in this case a movie database with all the details of a particular movie, up to this point everything is working fine.

When the web app tries to read data that a particular movies does not have, in this case, not all movies have rotten tomatoes rating, it crashes, i destructured the object to give it a default value, but it still crashes if does not find the value, can anyone point me in the right direction ?

export default function MovieDetail(props) {
  const imdbId = props.location.detailsProps;
  const [favorited, setFavorited] = useState(false);

  const [details, setDetails] = useState({
    Runtime: '',
    Year: '',
    Rated: '',
    Title: '',
    Ratings: [{
      Source: '',
      Value: '',
    },
    {
      Source: '',
      Value: '',
    },
    ],
    Plot: '',
    Actors: '',
    Genre: '',
    Director: '',
  });

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

  const showFavorite = (e) => {
    setFavorited(true);
  };

  const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?i='+imdbId.id+'&apikey=536a34c3';
    console.log(imdbId.id);


    const response = await axios.get(url)

        .then((response) => setDetails(response.data));
  };
  if (!details) return null;

  return (
    <div className="body">
      <div className="logo">
        <img src={logo} alt="logo" />
      </div>
      <Link to="/" className="Link">
        <img src={arrow} alt="arrow" />
      </Link>
      <div className="runtime">
        <h1>{details.Runtime}</h1>
        <p>.</p>
        <h1>{details.Year}</h1>
        <p>.</p>
        <h2>{details.Rated}</h2>
      </div>
      <div className="title">
        <h1>{details.Title}</h1>
      </div>

      <div className="rottenImdb">
        <img src={imdbLogo} alt="imdbLogo" />
        <h2>{details.Ratings[0].Value}</h2>
        <img src={rottenLogo} alt="rottenLogo" className="rotten"/>
        <h2>{details.Ratings[1].Value}</h2>
      </div>

      <div className="favorite" onClick={showFavorite}
        style={{visibility: favorited ? 'hidden' : ' '}}>
        <img src={favoriteHeart} alt="heart"/>
        <h2>Add to favourites</h2>
      </div>

      <div className="favorited" onClick={showFavorite}
        style={{visibility: favorited ? 'visible ' : 'hidden'}}>
        <img src={favoritedHeart} alt="heart"/>
        <h2>Added</h2>
      </div>

      <div className="plot">
        <h1>Plot</h1>
        <h2>{details.Plot}</h2>
      </div>
      <div className="technical">
        <div className="cast">
          <h1>Cast</h1>
          <h2>{details.Actors}</h2>
        </div>

        <div className="genre">
          <h1>Genre</h1>
          <h2>{details.Genre}</h2>
        </div>

        <div className="director">
          <h1>Director</h1>
          <h2>{details.Director}</h2>
        </div>
      </div>
      <div className="poster">
        <img src={details.Poster} alt="poster" />
      </div>
    </div>

  );
}

Naren · Accepted Answer · 2020-11-10 12:47:52Z

1

Don't Mix thenables and async/await.

const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?i='+imdbId.id+'&apikey=536a34c3';
    console.log(imdbId.id);
    try {
      const response = await axios.get(url)
       setDetails(response.data)
    } catch(err) {
       console.log(err)
    }
  };

Also add safe check for Ratings


<div className="rottenImdb">
        <img src={imdbLogo} alt="imdbLogo" />
        { 
           details.Ratings && details.Ratings[0] ? (<h2>{details.Ratings[0].Value}</h2>) : null
        }
        <img src={rottenLogo} alt="rottenLogo" className="rotten"/>
       {
          details.Ratings && details.Ratings[1] ? (<h2>{details.Ratings[1].Value}</h2>) : null
       }
      
      </div>

edited Nov 10, 2020 at 12:47

answered Nov 10, 2020 at 10:59

Naren

4,5293 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavan Kalyan · Accepted Answer · 2020-11-10 10:48:35Z

1

 <h2>{details.Ratings[0].Value ==undefined||null ? {details.Ratings[0].Value} :null}</h2>

answered Nov 10, 2020 at 10:48

Pavan Kalyan

4072 silver badges10 bronze badges

Collectives™ on Stack Overflow

ReactJS - Undefined when accessing data from API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related