After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent function. My intention is to utilize these values from details to populate a component within the return function at the end.
import React from "react"
import theMovieDb from './moviedb.js'
export default function MovieDetails(props){
const movieDetails = GetMovieDetails(props.id)
console.log(movieDetails)
function GetMovieDetails(id) {
var details = {
genres: undefined,
title: undefined,
imdbID: undefined,
popularity: undefined,
releaseDate: undefined,
posterPath: undefined,
}
theMovieDb.movies.getById({
"id" : id
}, function( data ) {
data = JSON.parse( data );
details.genres = data.genres
details.title = data.original_title
details.imdbID = data.imdb_id
details.popularity = data.popularity
details.releaseDate = data.poster_path
details.posterPath = data.release_date
console.log(details)
}, function( err ) {
console.error(err)
});
return(
details
);
}
return (
<div className='movie-card-container'>
<div >
<h1>Title: {movieDetails.title}</h1>
<h2>Year Released: 2005 </h2>
<h2>Genre: Action/Sci-Fi</h2>
<h3>Run Time: 2h 20m</h3>
</div>
</div>
);
}