Here is my code:
import EventsContainer from "@/components/events/events-container/EventsContainer"; // Main container component
interface EventProps {
events: any[];
pastEvents: any[];
}
const EventsPage: React.FC<EventProps> = ({ events, pastEvents }) => {
return (
<div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
<EventsContainer events={events} pastEvents={pastEvents} />
</div>
);
};
export default EventsPage;
But each time I build the nextjs project, I get this error message:
Type error: Type ‘OmitWithTag<EventProps, keyof PageProps, “default”>’ does not satisfy the constraint
‘{ [x: string]: never; }’.
The above file is the page.tsx file of my events component.
I don’t know what to do because here is the code of the page.tsx of my about component and it is perfectly fine:
import AboutContainer from "@/components/about/about-container/AboutContainer";
const AboutPage: React.FC = () => {
return (
<div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
<AboutContainer />
</div>
);
};
export default AboutPage;
I don’t get why the other gives an issue.
Nyochembeng Nkengafack is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Typescript is smart enough to infer whether something is a React component so typing a component as React.FC shouldn’t be needed.
As for passing the props type, you can refactor your component to be this and it should be happy:
interface EventProps {
events: any[];
pastEvents: any[];
}
const EventsPage = ({ events, pastEvents }: EventProps) => {
return (
<div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
<EventsContainer events={events} pastEvents={pastEvents} />
</div>
);
};
Boocher is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3