[解決]failed prop type: Invalid prop `children` supplied to `ForwardRef(Typography)`, expected a ReactNode

[解決]failed prop type: Invalid prop `children` supplied to `ForwardRef(Typography)`, expected a ReactNode.md

[解決]failed prop type: Invalid prop children supplied to ForwardRef(Typography), expected a ReactNode

titleIconElement

////////
<AppList listTitle="タイトル" appInfos={ownAppInfos} showAllUrl={"/apps"} titleIconElement={<></>} />
<AppList listTitle="タイトル" appInfos={favoriteAppInfos} showAllUrl={"/apps/favorite"} titleIconElement={<></>} />
<AppList listTitle="タイトル" appInfos={presetAppInfos} showAllUrl={"/apps/preset"} titleIconElement={<></>} />


/////////////////
in AppList.tsx

// titleIconElement is error as [expected a ReactNode]
<Typography classes={{ root: classes.ListTitle }}>{titleIconElement}{listTitle}</Typography>

To fix

change props Type

   showAllUrl: string;
-  titleIconElement: React.ReactElement<SvgIconProps>; // remove
   displayLimit?: number;
+  children: React.ReactNode; //add


pass React Node as children

<AppList listTitle="タイトル" appInfos={ownAppInfos} showAllUrl={"/apps"}><React.Fragment /></AppList>
<AppList listTitle="タイトル" appInfos={favoriteAppInfos} showAllUrl={"/apps/favorite"} ><React.Fragment /></AppList>
<AppList listTitle="タイトル" appInfos={presetAppInfos} showAllUrl={"/apps/preset"} ><React.Fragment /></AppList>

// in AppList.tsx
<Typography classes={{ root: classes.ListTitle }}>
  {children}
  {listTitle}
</Typography>

• Twitter @bukkotsunikki
• author