TypeError: filteredGames.filter is not a function

[ryanNewcodeer123]

Hi, I just have copy your work and use localhost:3000 and it said: my index.js in pages folder:

import { useState } from "react";
import Layout from "../components/Layout";
import SearchBox from "../components/SearchBox";
import GameList from "../components/GameList";

import styles from "../styles/Home.module.css";

export default function Home({ filteredGames }) {
  const [search, setSearch] = useState("");

  const handleChange = (e) => {
    e.preventDefault();
    setSearch(e.target.value.toLowerCase());
  };

  const filterGames = filteredGames.filter((game) => {
    return game.title.toLowerCase().includes(search.toLowerCase());
  });

  return (
    <Layout>
      <div className={styles.container}>
        <SearchBox
          type="text"
          placeholder="Search your game.."
          onChange={handleChange}
        />
        <div className={styles.cardList}>
          <GameList filterGames={filterGames} />
        </div>
      </div>
    </Layout>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch(
    "https://free-to-play-games-database.p.rapidapi.com/api/games",
    {
      method: "GET",
      headers: {
        "x-reapidapi-host": process.env.RAPID_API_HOST,
        "x-rapidapi-key": process.env.RAPID_API_KEY,
        "Content-Type": "application/json",
      },
    }
  );
  const filteredGames = await res.json();

  return {
    props: {
      filteredGames,
    },
  };
};

What to do?

[isNan909]

Please make sure you are receiving the needed data from the API. It seems like you have not yet received any data from the server. Please console filteredGames, you should see something here. And make sure you have the headers set correctly for the request to happen.