CODEWITHSUNDEEP
reactjsapithemoviedb-api
faizan_khan98
faizan_khan98

Reputation: 141

React: MovieDB API won't display movie poster

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

Upvotes: 0

Views: 1332

Answers (2)

Rishav Raj
Rishav Raj

Reputation: 1

To show all dynamic data we have to use "?" with values.

<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>

Not give space between "?" and '.' with data values.

Upvotes: 0

Paul
Paul

Reputation: 4438

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>
    )
}

Upvotes: 2

Related Questions