tengo 2 componentes order.tsx y ModalComponent.tsx ..
aquí mi código order.tsx
// state const [modal, setModal] = useState(false); // modal component <Modal item={dataDetail} showModal={false} />y mi código ModalComponent.tsx
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 > }este error de retorno
Type 'boolean' is not assignable to type 'ModalProps'.¿Hay algún problema con mis ModalProps? soy novato en mecanografiado. Me atasqué en este error cuando intenté hacer un componente reutilizable en React TypeScript.
Dado que ha definido los tipos de accesorios, debe proporcionar los accesorios como se muestra a continuación.
<Modal item={{item: dataDetail}} showModal={{showModal: false}} />Organice las interfaces como se muestra a continuación.
DetailPropsModalProps al siguiente formulario interface ModalProps { item: ItemProps; showModal: boolean; }ModalProps como el tipo de propiedad export default function ModalComponent(props: ModalProps) <Modal item={dataDetail} showModal={false} />está pasando boolean a showModal, pero espera un objeto con la propiedad showModal. Tienes que cambiar el tipo.
Sugerencia/Buena práctica. : Use React.FC<Props> para el tipo de componente.
interface ModalProps { item: ItemProps; showModal: boolean; } export default const ModalComponent: React.FC<ModalProps> = (props)=>{};