Could this issue I am facing be due to not understanding how movie-trailer works?

[HunterWhiteDev]

Hello lacymorrow, I am trying to build a netflix clone for my portfolio as I have been teaching myself programming, I am using TMDB to create well, what I think looks like a pretty good netflix clone, at least for myself, anyways... I have the movies pulled from the database and I have a function that when I click on a movie it will run movie-trailer on it with it's id, that's fine and it I have it showing up and gives me an trailer url for most of the videos, but when I try to only add videos into movies array with the video url it doesn't work or it bugs out and says .map is not a function. Here is my code:

import React, { useEffect, useRef, useState } from "react";
import "./Row.css";
import axios from "./axios";
import ArrowForwardIosIcon from "@material-    ui/icons/ArrowForwardIos";
import YouTube from "react-youtube";
import movieTrailer from "movie-trailer";
import { ContactlessOutlined, MovieSharp } from "@material-    ui/icons";
function Row({ title, fetchUrl, isLargeRow = false }) {
  const [movies, setMovies] = useState([]);
  const [trailerUrl, setTrailerUrl] = useState("");
  const [trailerList, setTrailerList] = useState("");

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

  const posterRowRef = useRef();

  const handleClick = (movie) => {
console.log(movie.videoUrl);

if (trailerUrl) {
  setTrailerUrl("");
} else {
  console.log(movie);
  movieTrailer(null, {
    tmdbId: movie.id,
    apiKey: "***************************",
  }).then((url) => {
    console.log("URL", url);
  });
}
  };

  useEffect(() => {
    async function fetchData() {
      let request = await axios.get(fetchUrl);

      request.data.results.forEach((movie, index) => {
        movieTrailer(null, {
          tmdbId: movie.id,
          apiKey: "***************************",
        }).then((response) => {
          if (response == null) {
            movie["videoUrl"] = null;
          } else {
            movie["videoUrl"] = response;
            setMovies([...movies, movie]);
          }
        });
      });
      // setMovies(request.data.results);

      return request;
    }
    fetchData();
  }, [trailerUrl]);

  return (
<div className="row">
  <h2>{title}</h2>{" "}
  <div ref={posterRowRef} className="row__posters">
    {movies.map((movie, index) => {
      // console.log(trailerList[index]?.videoUrl);
      return (
        <img
          key={movie.id}
          onClick={() => handleClick(movie)}
          className={`row__poster ${isLargeRow && "row__posterLarge"}`}
          src={`${base_url}${
            isLargeRow ? movie.poster_path : movie.backdrop_path
          }`}
          alt=""
        />
      );
    })}
  </div>
</div>
  );
}

export default Row;

Not sure if this is not the most appropriate place, but I just really need help I am not sure if this is because I don't understand how to add to an array in React, or maybe it something to do with movie-trailer needing to be async or something with a promise, idk I am just stuck and have been working for 2 days any help would be appreciated!

[lacymorrow]

Without running your code I won't be able to tell you exactly what's wrong, but a few notes:

• You may want to check for existence of request.data.results before looping on it
• It's usually good practice to avoid Array.forEach(), it's quite a bit slower than a regular for... loop.
• Don't call setState within a loop, or if you must, debounce the function call. I believe react has to re-render on most state changes.

As far as why the movieTrailer isn't working, it is an async function so if you aren't using .then() then you'll need await (it looks like you've done this properly in your code).

Let me know if you're still having issues, I can help debug.

[lacymorrow]

Closing as stale