Unhandled Runtime Error Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead

1

i am writing mosh’s react game-hub project in next.js but i am having problem when i try to render a NavBar component. Inside the NavBar, i have a logo and a ColorModeSwitch component which is another HStack and this HStack contains a Switch and a Text component. And the error is =>

Unhandled Runtime Error Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

2

please show me your code

3
  1. app/page.tsx
    import { Grid, GridItem, Show } from “@chakra-ui/react”;
    import NavBar from “./components/NavBar”;
    import GameGrid from “./components/GameGrid”;

export default function Home() {
return (
<Grid
templateAreas={{
base: "nav" "main",
lg: "nav nav" "aside main",
}}
>




Aside





);
}

2)app/components/GameGrid.tsx
“use client”;

import { SimpleGrid, Text } from “@chakra-ui/react”;
import useGames from “…/hooks/useGames”;
import GameCard from “./GameCard”;

const GameGrid = () => {
const { games, error } = useGames();

return (
<>
{error && {error}}
<SimpleGrid columns={{

  }} spacing={10}>
    {games.map((game) => (
      <GameCard key={game.id} game={game} />
    ))}
  </SimpleGrid>
</>

);
};

export default GameGrid;

  1. app/hooks/useGames.tsx
    import { useState, useEffect } from “react”;
    import apiClient from “…/services/api-client”;
    import { CanceledError } from “axios”;

export interface Game {
id: number;
name: string;
background_image: string;
}

interface FetchGamesResponse {
count: number;
results: Game;
}

const useGames = () => {
const [games, setGames] = useState<Game>();
const [error, setError] = useState(“”);

useEffect(() => {
const controller = new AbortController();

apiClient
  .get<FetchGamesResponse>("/games", {signal: controller.signal})
  .then((res) => setGames(res.data.results))
  .catch((err) => {
    if (err instanceof CanceledError) return;
    setError(err.message)
  });

return () => controller.abort();

}, );

return {games, error};
}

export default useGames;

  1. app/components/GameCard.tsx
    import React from “react”;
    import { Game } from “…/hooks/useGames”;
    import { Card, CardBody, Heading, Image } from “@chakra-ui/react”;

interface Props {
game: Game;
}

const GameCard = ({ game }: Props) => {
return (



{game.name}


);
};

export default GameCard;

  1. app/components/ColorModeSwitch.tsx
    import { Flex, HStack, Switch, Text, useColorMode } from “@chakra-ui/react”;

const ColorModeSwitch = () => {
const { toggleColorMode, colorMode } = useColorMode();

return (

<Switch
colorScheme=“green”
isChecked={colorMode === “dark”}
onChange={toggleColorMode}
/>
Dark Mode

);
};

export default ColorModeSwitch;

  1. app/components/NavBar.tsx
    import { HStack, Text } from “@chakra-ui/react”;
    import Image from “next/image”;
    import logo from “…/components/assests/logo.webp”;
    import ColorModeSwitch from “./ColorModeSwitch”;
    const NavBar = () => {
    return (




    );
    };

export default NavBar;

Problem came in NavBar while rendering the HStack with Image and ColorModeSwitch.tsx

4

It looks like you are not closing the element on the export default function Home() component.

*** Also - When you paste code into the forum, highlight the entire block of code and click the </> button on the editor to format that code block as a code. It will look nicer and be easier to debug.

import { Grid, GridItem, Show } from “@chakra-ui/react”;
import NavBar from “./components/NavBar”;
import GameGrid from “./components/GameGrid”;

export default function Home() {
  return (
    <Grid
      templateAreas={
          {
                base: "nav" "main",
                lg: "nav nav" "aside main",
          }
      }
  >

Aside

</Grid> // this was missing

);
}