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
Since the way you have defined types of props, you need to provide the props like below.
<Modal item={{item: dataDetail}} showModal={{showModal: false}} />
Organize the interfaces like below.
DetailProps interfaceModalProps to the following forminterface ModalProps {
item: ItemProps;
showModal: boolean;
}
ModalProps as the prop typeexport default function ModalComponent(props: ModalProps)
<Modal item={dataDetail} showModal={false} />
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)=>{};