Genre disappeared

React
1

Please after refactoring my code my genre list has disappeared in the web page and also when I select the platform it appears double name like if it’s android it will appear androidandroid please what is wrong with my code
These are my components
import { SimpleGrid, Text } from “@chakra-ui/react”;
import useGames, {} from “…/hooks/useGames”;

import GameCard from “./GameCard”;
import GameCardContainer from “./GameCardContainer”;
import GameCardSkeleton from “./GameCardSkeleton”;
import { GameQuery } from “…/App”;

interface Props {
gameQuery: GameQuery
}

const GameGrid = ({gameQuery}: Props) => {
const { data, error, isLoading } = useGames(gameQuery);
const skeletons = [1, 2, 3, 4, 5, 6];

return (
<>
{error && {error}}
<SimpleGrid
columns={{ sm: 1, md: 2, lg: 3, xl: 5 }}
padding=“10px”
spacing={3}
>
{isLoading &&
skeletons.map((skeleton) => (



))}
{data.map((game) => (



))}

</>
);
};

export default GameGrid;
import useData from “./useData”;

export interface Genre {
name: string
id: number
image_background: string
}

const useGenres = () => useData(‘/genres’)

export default useGenres;

import { List, ListItem, HStack, Image, Spinner, Button } from “@chakra-ui/react”;
import useGenres, { Genre } from “…/hooks/useGenres”;
import getCroppedImageUrl from “…/services/image-url”;

interface Props {
onSelectGenre: (genre: Genre) => void;
selectedGenre: Genre|null;
}

const GenreList = ({selectedGenre, onSelectGenre}:Props) => {
const { data, isLoading, error} = useGenres();

if (isLoading) return
if (error) null
return (

{data.map((genre) => (


<Image
boxSize=“32px”
borderRadius={8}
src={getCroppedImageUrl(genre.image_background)}
alt={${genre.name} background}
/>
<Button fontWeight={genre.id===selectedGenre?.id? ‘bold’: ‘normal’} onClick={()=>onSelectGenre(genre)} fontSize=“lg” variant=‘link’>{genre.name}


))}

);
};

export default GenreList;
And the app.tsx

import { Grid, GridItem, Show } from “@chakra-ui/react”;
import { useState } from “react”;
import GameGrid from “./components/GameGrid”;
import GenreList from “./components/GenreList”;
import NavBar from “./components/NavBar”;
import PlatformSelector from “./components/PlatformSelector”;
import { Genre } from “./hooks/useGenres”;
import { Platform } from “./hooks/useGames”;

export interface GameQuery {
genre: Genre | null;
platform: Platform | null;
}

function App() {
const [gameQuery, setGameQuery] = useState({ genre: null, platform: null });

return (
<Grid
templateAreas={{
base: "nav" "main",
lg: "nav nav" "aside main""
}}
templateColumns={{
base: ‘1fr’,
lg: ‘200px 1fr’
}}
>





<GenreList selectedGenre={gameQuery.genre} onSelectGenre={(genre) => setGameQuery({ …gameQuery, genre })} />



<PlatformSelector
selectedPlatform={gameQuery.platform}
onSelectPlatform={(platform) => setGameQuery({ …gameQuery, platform })}
/>



);
}

export default App;