Issue
How can I handle empty props in my component so it does not show a blank component. Currently I get the error:
Type '{ activeBreakdownDescription?: string | undefined; activeBreakdownHeader?: string | undefined; activeBreakdownIcon?: any; activeBreakdownImage?: any; } | undefined' is not assignable to type '{ activeBreakdownDescription?: string | undefined; activeBreakdownHeader?: string | undefined; activeBreakdownIcon?: any; activeBreakdownImage?: any; }'.
Type 'undefined' is not assignable to type '{ activeBreakdownDescription?: string | undefined; activeBreakdownHeader?: string | undefined; activeBreakdownIcon?: any; activeBreakdownImage?: any; }'.
In my header I am passing the following props:
<HomeHeader
dynamicHeroItems={filteredCarouselItems}
activeBreakdownContent={activeBreakdownContent}
/>
How I can check the empty the property exists in the component?
interface HomeHeaderProps {
activeBreakdown: {
activeBreakdownDescription?: string;
activeBreakdownHeader?: string;
activeBreakdownIcon?: BaseImageModel;
activeBreakdownImage?: BaseImageModel;
};
}
const HomeHeader = ({
activeBreakdownContent: {
activeBreakdownHeader,
activeBreakdownDescription,
activeBreakdownIcon,
activeBreakdownImage,
},
dynamicHeroItems,
}: HomeHeaderProps) => {
// ...
if (...) {
return (
<RescueMeHero
title={activeBreakdownHeader || ''}
body={activeBreakdownDescription || ''}
image={activeBreakdownImage}
icon={activeBreakdownIcon}
/>
);
}
Solution
You have at least 2 options:
- if the prop is empty, don't have the parent try to render the component:
{(filteredCarouselItems && activeBreakdownContent && <HomeHeader
dynamicHeroItems={filteredCarouselItems}
activeBreakdownContent={activeBreakdownContent}
/>)}
which will only render <HomeHeader>
if both props have a non-falsey value.
- Inside HomeHeader, decide what you want to show instead of a blank when the prop is empty:
if (activeBreadownImage && activeBreakdownIcon) {
return (
<RescueMeHero
title={activeBreakdownHeader || ''}
body={activeBreakdownDescription || ''}
image={activeBreakdownImage}
icon={activeBreakdownIcon}
/>
);
} else {
return <div>Something Else Goes Here</div>;
}
Answered By - Greg Fenton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.