Getting an error saying `TypeError movies.map is not a function`
import type { GetStaticProps, NextPage } from "next";
import MovieTypes from "../types/MovieTypes";
import MovieCard from "../components/MovieCard";
// type Props = {
// movies: MovieTypes[];
// };
const Home = ({ movies }: { movies: MovieTypes | any }) => {
return (
<div className="h-screen w-screen flex flex-col">
{movies.map((movie: MovieTypes) => (
<div
className="m-24 border p-4 border-lime-600 justify-center"
key={movie.id}
>
<MovieCard movies={movie} />
</div>
))}
</div>
);
};
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch(
"https://api.themoviedb.org/3/movie/popular?api_key=KEY"
);
const movies = await res.json();
// console.log(results);
return {
props: {
movies,
},
};
};
export default Home;
7 Replies
you cant map
anyI'm still getting the errot after removing
anyconst Home = ({ movies }: { movies: MovieTypes | any }) should probably be { movies }: { movies: MovieTypes[] }
Also are you sure your api return a list ?
And not an object containing page, results, and results would be your list ?
It works now, thank you!
Wait no it still gives me that error on the page.
Did you make sure to pass the props to your component? In _app.tsx you should have something like this:
Yes and I am still getting "movies .map is not a function"
What is the type of movies at runtime