Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(…)`, expected a ReactNode.
Jul 23, 2021
Material UI⁴.11, React¹⁷.0.2, Created at July 21, 2021, Read Series…
When <Typography/>
/* in ListWithAxios.tsx and ListWithReactFetch.tsx */
/* Original Code, with Fix of
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Typography)`, expected a ReactNode. */<Typography key={item.id}>
/* The reason is following code represents 5 React ReactNodes*/
/* But some React elements only allow 1 child ReactNode*/
{item.id} - {item.completed} - {item.text}
</Typography>/* Fix 1, suggested, 1 React ReactNode */
<Typography key={item.id}>
{item.id + '-' + item.completed + '-' + item.text}
</Typography>/* Fix 2, not suggested, 5 React ReactNodes */
<Typography key={item.id}>
<> {item.id} - {item.completed} - {item.text} </>
</Typography>/* Fix 3, not suggested, 15 React ReactNodes */
<Typography key={item.id}>
<React.Fragment> {item.id} - {item.completed} - {item.text}
</React.Fragment>
</Typography>
Github commits is here: Basic-1.13. 2 Popular React Warnings
