Question 368412 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Typescript: pass interface as a parameter from one functional component to another functional component

I have a react next.js application. where I am trying to pass data using interface props into another component. while running build I am encountering an issue. below are the details.

I have a interface ModelProps

export interface ModelProps  {
modalOpen?: boolean;
data: any;
reloadParent: () => void;
closeModal: () => void;
}

this is my parent component

function page(props: ModelProps) {
    const { modalOpen, data, reloadParent,closeModal } = props;
    return (
        <div>
                <BookingModalPopup modalOpen={modalOpen} data={data} reloadParent={reloadParent} closeModal={closeModal} />
        </div>
    )
}

and this is my child component where I am trying to open a popup modal to show some details

interface RequestData {
   [key: string]: string;
}

function BookingModalPopup(modelProps: ModelProps) {
const [currentDate, setCurrentDate] = useState(new Date().toISOString().split('T')[0]);
const [msg, setMsg] = useState('');
const [isMsgModalOpen, setIsMsgModalOpen] = useState<boolean>(false);
const [isloaderOpen, setIsLoaderOpen] = useState<boolean>(false);
const [requestData, setRequestData] = useState<RequestData>({});


return (
    <div>
        <>
        <ModelPopup isOpen={isMsgModalOpen} closeModal={closeMsgModal} msg={msg} />
        <Loader isOpen={isloaderOpen} />
            <My Elements Here>
        </>
    </div>
)
}

export default BookingModalPopup

whenever i am running npm run build it is giving below error

Type error: Type 'OmitWithTag<ModelProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'modalOpen' is incompatible with index signature.
    Type 'boolean' is not assignable to type 'never'.

any help would be appriciated

TIA

Tags:

2

Answers


  1. 0

    You just use the ModelProps interface in your BookingModalPopup component, you can specify the type of the modelProps parameter in the function signature.

    import React from "react";
interface ModelProps {
 modalOpen?: boolean;
 data: any;
 reloadParent: () => void;
closeModal: () => void;}


interface Props {
  modelProps: ModelProps;
}
    const BookingModalPopup: React.FC<Props> = ({ modelProps }) => {
  // Access the data property safely using optional chaining
  const data = modelProps?.data;
  // Use the data in your component
  return <div>Test</div>;
};

export default BookingModalPopup;
    Login or Signup to reply.
  2. 0

    The issue is with the code structure. looks like BookingModalPopup is a component which is being called from page.tsx which also gets called from another component.

    remove the page.tsx and directly call BookingModalPopup from another component

    for example

    function CompA() {

    const [modelOpenT, setModelOpenT] = useState<string>('true');
    const [dataToEdit, setDataToEdit] = useState<any>('false');

   
    return (
        <div>
            <BookingModalPopup parameter1={dataToEdit} parameter2={modelOpenT} /> 
        </div>
    )
}




const BookingModalPopup: React.FC<ModelProps> = ({ parameter1, parameter2 }) => {
   
    return (
        <div>
            <>
            <div className='text-white'>Model Open: {parameter1}</div>
            <div>{JSON.stringify(parameter2)}</div>
            </>
        </div>
    )
}

export default BookingModalPopup

    and call this CompA from another component for example

    export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <CompA/>
    </main>
  );
}

    this will solve your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search