How can I navigate to a new page based on the image selected that was pulled form an API in react?

I have a personal movie database website I'm working on with react.js. The homepage displays a main recommended random movie, and then specific rows of movies. These movies are all generated by using an API from TMDB.org.

What I would like to accomplish is the ability to click on an image (or the main recommended movie) and be redirected to a page specific to the movie requested with the attributing data like photos, release date, etc.

I assume I need to do something like a getElementByID function, but I'm not sure how to do that. Also how would I link that in my app.js. (Right now I have a MovieDetails.jsx page which can be accessed by going to the url/moviedetails page. I assume it will use that page and alter it every time you go to it with a new movie.)

This is the code that pulls in the images from the specific movie titles.

 <div className="w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block cursor-pointer relative p-2">
      <img
        className="w-full h-auto block"
        src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`}
        alt={item?.title}
      />
      <div className="absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white">
        <p className="white-space-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center">
          {item?.title}
        </p>
      </div>
    </div>

Solution

You can use dynamics pages to deal with it

1- In your App.js :

<BrowserRouter>
    <Route path="movie/:id" element={<Movie />} />
</BrowserRouter>

2- Add Link to your image :

<Link to={`movie/${item?.id}`}>
    <img
        className="w-full h-auto block"
        src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`}
        alt={item?.title}
    />
</Link>

The idea is to pass an id to a dynamic page depend on this id.
Make sure that you have id property in your data.

3- Make a new component Movie.js :

const Movie = () => {
    let { id } = useParams();
    // Fetch the data depend on the "id" or just filter it
    return (
        // Your Code here
    )
}

Of course don't forget to import the BrowseRouter Route Link Movie useParams

I wish that was clear for you