Question 201663 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Property 'map' does not exist on type 'never' when map through array

getting array from API and storing it into Movie state but when I try to map that movie I got the error:

"Property ‘map’ does not exist on type ‘never’."

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

function Home() {
  const [movie, setMovie] = useState();
  const API_Url = `https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_TMBD_KEY}`;

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

  async function getMovies() {
    const api = await fetch(API_Url);
    const result = await api.json();
    setMovie(result.results);
    console.log(result.results);
  }

  return (
    <div>
      {movie?.map((data:any) => {
        <MoviePoster key={data} {...data} />;
      })}
    </div>
  );
}

export default Home;

the changes that I have applied… I just removed the common API part

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

interface MovieList {
  title: string,
  id: string
}

function Home() {
  const [movie, setMovie] = useState<MovieList[]>([]);
  

  return (
    <div>
      {movie?.map((data:any) => {
        <MoviePoster key={data.id} {...data.title} />;
      })}
    </div>
  );
}

export default Home;

"consoled data image…."

consoled data

Tags:

2

Answers


  1. 0

    In addtion to what has been said by Hatana in the comments, you could also add a loading screen. That way you can be sure that you have your data in your array before the component is rendered.

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

interface MovieList {
  movieList: [];
}

function Home() {
  const [movie, setMovie] = useState<MovieList>();
  const [loading, setLoading] = useState(true);
  const API_Url = `https://api.themoviedb.org/3/discover/movie? 
api_key=${process.env.REACT_APP_TMBD_KEY}`;

useEffect(() => {
  getMovies();
  setLoading(false);
}, []);

async function getMovies() {
  const api = await fetch(API_Url);
  const result = await api.json();
  setMovie(result.results);
  console.log(result.results);
}

if (loading) {
  return <div>Loading</div>;
}

return (
  <div>
    {movie?.map((data: any) => {
      <MoviePoster key={data} {...data} />;
    })}
  </div>
);

export default Home;
    Login or Signup to reply.
  2. 0

    I think you need to return from the map

      return (
    <div>
      {movie?.map((data:any) => {
        return <MoviePoster key={data} {...data} />;
      })}
    </div>
  );

    instead of

    return (
    <div>
      {movie?.map((data:any) => {
        <MoviePoster key={data} {...data} />;
      })}
    </div>
  );

    Created a codesandbox demo with this components. Have a look here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search