I am having trouble counting how many games are rated. So I managed to do, parent -> child : pass gameinfo data However, I am stuck for few days to figure out how to count how many games were rated.

Can someone please help me how I'm supposed to fix this part:

//in child : how to use props * callback function from parent at the same time ? 
export default function BoardCard(
  props: { game: Game; parentCallback: ICount },
  { parentCallback }: ICount
) //I am totally stuck on this part T0T 
...

or if there's any other efficient way on counting how many games were rated?

Below are my codes. I have added few comments explaining what i did:

Parent.tsx

import React, { useEffect, useState } from "react";
import BoardCardMain from "./component/BoardCardSurvey";
import { Button, Box, Grid, Container } from "@mui/material";
import WelcomeStepper from "../component/WelcomeStepper";
import { useNavigate } from "react-router-dom";
import { initSurvey } from "../../../api/user";
import { valueToPercent } from "@mui/base";

//Game Interface
export interface Game {
  gameNo: number;
  gameImg: string;
  gameName: string;
}

export default function Survey() {
  const [gameList, setGameList] = useState<Game[]>([]); //I get error if i remove <Game[]> type

  const [count, setCount] = useState(0);// to count how much games were rated

  useEffect(() => {
    setCount(0);
    setGameList(tempData.gameList); // connect API (temp Data for now)
     }, []);
//what am i supposed to do ;~;
  const countHandler = (cnt: number) => {
    if (cnt > 0) {
      setCount(count   1);
    }
  };

  return (
    <>
      <Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        style={{ minHeight: "100%" }}
      >
        <Container style={{ marginTop: 20, padding: 10 }}>
          <Grid container spacing={2}>
            {gameList.map((game) => (
              <BoardCardMain
                key={game.gameNo}
                game={game}
                parentCallback={countHandler}
              ></BoardCardMain>
            ))}
          </Grid>
        </Container>
        <Button
          style={{ position: "fixed", bottom: "0px" }}
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          size="large"
        >
          Completed
        </Button>
      </Grid>
    </>
  );
}

// temp data before calling api
const tempData = {
  gameList: [
    {
      gameNo: 1,
      gameImg:
        "https://cf.geekdo-images.com/original/img/uqlrq_bQJqHpcaN7_7qocV5XfbU=/0x0/pic4718279.jpg",
      gameName: "Die Macher long title very long",
    },
    {
      gameNo: 12,
      gameImg:
        "https://cf.geekdo-images.com/original/img/o07K8ZVh0PkOpOnSZs1TuABb7I4=/0x0/pic4001505.jpg",
      gameName: "Dragonmaster",
    },
  ],
};

Child (BoardGameSurvey.tsx)

//import statements 


const initScore = 0;
interface ICount {
  parentCallback: (cnt: number) => void;
}

export default function BoardCard(
  props: { game: Game; parentCallback: ICount },
  { parentCallback }: ICount
) //I am totally stuck on this part T0T 
{
  const userno = useSelector((state: RootStateOrAny) => state.user.userNo);
  
  //I got how much score user rated if they rated
  const setStarRatings = (score: number) => {
   
    if (score > 0) {
      //if score is bigger than 0, it means its selected
      //alert(score);
      parentCallback(1); //pass One

    }
  };
  return (
    <Grid item xs={12} sm={4} md={3} lg={2.3}>
      <StyledCard variant="outlined">
        <CardActionArea>
          <ImgWrapper>
            <CardMedia
              sx={{
                position: "absolute",
                width: "100%",
                height: "100%",
                objectFit: "contain",
              }}
              component="img"
              image={props.game.gameImg}
              alt={props.game.gameName}
            />
          </ImgWrapper>
          <CardContent>
            <Grid container justifyContent="center">
              <GameTitle>{props.game.gameName}</GameTitle>
              <Box width="100%" />
              <StarRating
                initStarRate={0}
                gameNo={props.game.gameNo}
                userNo={userno}
                size={35}
                parentCallback={setStarRatings}
              />
            </Grid>
          </CardContent>
        </CardActionArea>
      </StyledCard>
    </Grid>
  );
}

CodePudding user response：

I think your problem is from here

export default function BoardCard(
  props: { game: Game; parentCallback: ICount },
  { parentCallback }: ICount
)

It should be

interface ICount {
  parentCallback: (cnt: number) => void;
  game: Game; //your game interface
}

export default function BoardCard(
  { game, parentCallback } : ICount
)