How can i pass a boolean state in reactjs with typescript

Question

i have 2 component order.tsx and ModalComponent.tsx..

here my order.tsx code

// state

const [modal, setModal] = useState(false);

// modal component

<Modal item={dataDetail} showModal={false} />

and my ModalComponent.tsx code

    import Link from "next/link";
import Image from "next/image";
import bgImg from "./../../../../public/assets/background_card.png";
import { formatRupiah } from "../../../helpers";
import ProductImage from "../../../../public/assets/product-list.jpg";
import styles from "../../../../styles/pages/Order.module.scss";
import moment from "moment";
import { Col, Row, Modal, Form } from "react-bootstrap";
import { useEffect, useState } from "react";

interface ItemProps {
  created_at: string;
  quantity: number;
  total_price: number;
  buyer_name: string;
  buyer_phone: number;
  buyer_email: string;
  buyer_address: string;
  order_status: string;
}

interface DetailProps {
  item: ItemProps;
}

interface ModalProps {
  showModal: boolean;
}

export default function ModalComponent(props: {
  item: DetailProps;
  showModal: ModalProps;
}) {
  const { item, showModal } = props;
  const modal_order = () => {
    return (
      <Modal
        className={styles.modalContainer}
        size="lg"
        show={showModal}
        // onHide={handleModal}
        centered
      >
       
}

this return error

Type 'boolean' is not assignable to type 'ModalProps'.

anything wrong with my ModalProps? i'm newbie on typescript. i stuck on this error when try to make a reusable component in react typescript

Answer 1

you are passing boolean to showModal, but it expects an object with showModal property. You have to change the type.

Suggestion/Good practice. : Use React.FC<Props> for component type.

interface ModalProps {
  item: ItemProps;
  showModal: boolean;
}

export default const  ModalComponent: React.FC<ModalProps> = (props)=>{};