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;
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;
