Fetch Data

axios

npm i axios

// src/axios.js

import axios from "axios";

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

export default instance;

Environment Variables

REACT_APP_API_KEY=<<TMDb_API_KEY>>

// src/requests.js

const requests = {
  fetchTrending: `/trending/all/week?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`,
};

export default requests;

useEffect Hook

// src/App.js

...
import Banner from "./Banner";
import requests from "./requests";

const App = () => {
  return (
    <div>
      ...
      <Banner fetchUrl={requests.fetchTrending} />
    </div>
  );
};

export default App;

// src/Banner.js

import { useEffect, useState } from "react";
import axios from "./axios";

const Banner = ({ fetchUrl }) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    const response = await axios.get(fetchUrl);
    console.log(response);
    setMovies(response.data.results);
  }

  return <div>Banner</div>;
};

export default Banner;

// src/Banner.js

const Banner = () => {
  ...
  const [randomMovie, setRandomMovie] = useState(null);

  ...
  useEffect(() => {
    if (movies.length > 0) {
      getRandomMovie();

      const timer = setInterval(() => {
        getRandomMovie();
      }, 10 * 1000);

      return () => clearInterval(timer);
    }
  }, [movies]);

  function getRandomMovie() {
    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
    console.log(randomMovie);
    setRandomMovie(randomMovie);
  }
  ...
}