Let’s say I have a home page which received array of data as props from nextjs getServierSideProps. And I have a object of component like that
const pages = {
0: Welcome,
1: SimType,
2: NumberSearch,
3: ShoppingCart,
4: PersonalInformation,
5: ShippingAddress,
6: OrderConfirmation,
}
In home page I’m rendering component from pages based on currentStep(which is a number between 0 to 7). And passing props to rendered component also based on currentStep. Here is my home page demo:
const pages = {
0: Welcome,
1: SimType,
2: NumberSearch,
3: ShoppingCart,
4: PersonalInformation,
5: ShippingAddress,
6: OrderConfirmation,
}
export default function Home({homeData}: {homeData: any}) {
// currentStep will be a number from 0 to 6
const currentStep = useSelector(selectStep)
// Select component based on currentStep to render
const Component = pages[currentStep as keyof typeof pages]
return (
<div className='mx-auto h-screen max-w-lg'>
<Component
// handleStepClick={handleStepClick}
data={homeData[currentStep]}
/>
</div>
)
}
export const getServerSideProps = wrapper.getServerSideProps(
(store) => async (context) => {
try {
const [homeData] = await Promise.all([getHomeData()])
return {
props: {
homeData,
},
}
} catch (error) {
console.log('===Error from index.js page===', error)
}
}
)
And in the component listed above (Welcome, Simtype e.t.c), I define the props type according to their use case. As an example I define props type for Welcome component like that –
type Props = {
data: {
title: string
subtitle: string
sim_image: string
packages: string[]
}
handleStepClick: (direction: 'next' | 'prev') => void
}
The problem is: when I hover over the data props in vscode, it shows the type of data is intersection of my Component List.
But I except union rather than intersection. How can I fix that so that type of data will be like that
<Component
data = WelcomePropsType | SimTypePropsType | NumberSearchPropsType | AndSoOn
/>