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

Amila Senadheera · Accepted Answer · 2022-02-01 05:17:11Z

5

Since the way you have defined types of props, you need to provide the props like below.

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

OR

Organize the interfaces like below.

Remove DetailProps interface
Change the ModalProps to the following form

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

Define ModalProps as the prop type

export default function ModalComponent(props: ModalProps)

In Order.tsx

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

edited Feb 1, 2022 at 5:17

answered Feb 1, 2022 at 4:48

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

venkatesh pogartha Over a year ago

<Modal item={{item: dataDetail}} showModal /> if you want send true <Modal item={{item: dataDetail}} /> if you want send false

Amila Senadheera Over a year ago

@FarhatDje, great !! can you please mark this as the answer if it actually solved your issue?

FarhatDje Over a year ago

yap @AmilaSenadheera.. thats solve my issue.. thanks to venkatesh

Rahul Sharma · Accepted Answer · 2022-02-01 04:50:31Z

0

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)=>{};

answered Feb 1, 2022 at 4:50

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Collectives™ on Stack Overflow

How can i pass a boolean state in reactjs with typescript

2 Answers 2

OR

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

OR

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related