I am building an App that displays movies and their titles from the MovieDB API. Right now I'm getting everything to display based off the props I passed in
<div className="movies">
{movies.map(movie => (
<Movies
key={movie.id}
title={movie.title}
popularity={movie.popularity}
release_date={movie.release_date}
image={movie.poster_path}
/>
))}
</div>
and my Component
export default function Movies({title, popularity, release_date, image}) {
return (
<div className="movies-items">
<h1>{title}</h1>
<img src={image} alt = ""></img>
<p>{popularity}</p>
<p>{release_date}</p>
</div>
)
}
But the movie poster is still not showing up. Not sure if this has something to do with my code or a problem with the API
Try:
export default function Movies({title, popularity, release_date, image}) {
return (
<div className="movies-items">
<h1>{title}</h1>
<img src={"https://image.tmdb.org/t/p/w500/"+image} alt = ""></img>
<p>{popularity}</p>
<p>{release_date}</p>
</div>
)
}