I'm trying to create a Netflix clone. I'm trying to show movies through an API called TMDB. But, when I try to view the movies, the content appears to be identical(in Action movies, Comedy movies, Romance movies and Documentaries) and the movie posters are not appearing in the Netflix originals area.

**CODE**

**App.js**

```js
import React from 'react';
import './App.css';
import Row from './Row';
import requests from './requests';

function App() {
  return (
    <div className="App">
     <h1>HEY boiii!!</h1>
     <Row title="NETFLIX ORIGINALS" fetchUrl={requests.fetchNetflixOriginals} isLargeRow />
     <Row title="Trending Now" fetchUrl={requests.fetchTrending} />     
     <Row title="Top Rated" fetchUrl={requests.fetchTopRated} />  
     <Row title="Action Movies" fetchUrl={requests.fetchActionMovies} />  
     <Row title="Comedy Movies" fetchUrl={requests.fetchComedyMovies} />  
     <Row title="Horror Movies" fetchUrl={requests.fetchHorrorMovies} />  
     <Row title="Romance Movies" fetchUrl={requests.fetchRomanceMovies} />  
     <Row title="Documentaries" fetchUrl={requests.fetchDocumentaries} />  
    </div>
  );
}

export default App;
```

**request.js**

```js
const API_KEY = "API KEY";

const requests = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}$with_networks=213`,
    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
    fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genre=28`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genre=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genre=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genre=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genre=99`,
  }
  export default requests;
```

**Row.js**

```js
import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';

const base_url ="https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl, isLargeRow }) {
useEffect(() => {
    async function fetchData() {
    const request = await axios.get(fetchUrl);
    setMovies(request.data.results);
    return request;
    }
    fetchData();
}, [fetchUrl]);

console.table(movies);

    return (
        <div className="row">
            <h2>{title}</h2>

            <div className="row__posters">
                {/* several row__poster(s) */}

                {movies.map(movie => (

                <img key={movie.id} className ={`row__poster ${isLargeRow && "row__poster"}`} src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name}/>
                ))}
            </div>
        </div>
    );
}

export default Row;
```

**Row.css**

```css
.row__posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {

  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}

.row__posterLarge {
  max-height: 250px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
  opacity: 1;
}
```

**App.css**

```css
* {
  margin: 0;
}
```

**axios.js**

```js
import axios from "axios";

const instance = axios.create({baseURL: "https://api.themoviedb.org/3"}); 

export default instance;
```