I am getting error message like this toogleShow is not function whenever I am passing as props from child to parent component in react typescript functional component. In child, i am also declare an interface but still getting that error. I am not used to typescript with react but I am learning to use typescript with react.

App.tsx

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useGetRecipesMutation } from "./services/recipeApi";
import Card from "./component/Card";

function App() {
  const [query, setQuery] = useState("");
  const [health, setHealth] = useState("vegan");
  const [modal, setModal] = useState(false);
  const [recipe, setRecipe] = useState({});

  const [getRecipes, { data, isLoading }] = useGetRecipesMutation();

  useEffect(() => {
    getFoodRecipes();
  }, [query, health]);

  const getFoodRecipes = async () => {
    await getRecipes({ query, health });
  };

  const toggleShow = (recipe: any) => {
    setModal(!modal);
    setRecipe(recipe);
  };   
  const showModal = (recipe: any) => {
    if (modal) {
      return (
        <>
          <MDBModal show={modal} setShow={modal}>
            <MDBModalDialog>
              <MDBModalContent>
                {recipe.label}
              </MDBModalContent>
            </MDBModalDialog>
          </MDBModal>
        </>
      );
    }
  };
  return (
    <>
      <div className="App">
   
        <MDBRow className="row-cols-1 row-cols-md-3 g-4">
          {data?.hits?.map((item: any) => (
            <Card toggleShow={toggleShow} recipe={item.recipe} />
          ))}
        </MDBRow>
        {modal && showModal(recipe)}
      </div>
    </>
  );
}

export default App;

Card.tsx

import React from "react";
import {
  MDBCol,
  MDBCardGroup,
  MDBCard,
  MDBCardImage,
  MDBCardBody,
  MDBCardTitle,
} from "mdb-react-ui-kit";

interface PropsFunction {
  toggleShow: (item: any) => void;
}

const Card = (recipe: any, { toggleShow }: PropsFunction) => {
  const { recipe: item } = recipe;

  return (
    <>
      <MDBCol>
        <MDBCardGroup>
          <MDBCard className="h-100 mt-2 d-sm-flex">
            <MDBCardImage
              src={item.image}
              alt={item.label}
              position="top"
              style={{ cursor: "pointer" }}
              onClick={() => toggleShow(item)}
            />
            <MDBCardBody>
              <MDBCardTitle>{item.label}</MDBCardTitle>
            </MDBCardBody>
          </MDBCard>
        </MDBCardGroup>
      </MDBCol>
    </>
  );
};

export default Card;

CodePudding user response：

Try declaring your Card component like this:

const Card: React.FC<PropsFunction> = ({recipe, toggleShow}) => {

And change your interface to:

interface PropsFunction {
  toggleShow: (item: any) => void;
  recipe: any;
}