Material-UI error The tag <body2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

4570

I am using a body2 style Typography in a card and I am getting following error in my console.

index.js:1 Warning: The tag <body2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in body2 (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (created by Index)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Index)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Index)
    in main (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by Index)
    in div (created by Index)
    in Index (created by WithStyles(Index))
    in WithStyles(Index) (created by Connect(WithStyles(Index)))
    in Connect(WithStyles(Index)) (created by MyApp)
    in Provider (created by MyApp)
    in ThemeProvider (created by MyApp)
    in Container (created by MyApp)
    in MyApp (created by AppWithRedux)
    in AppWithRedux
    in Suspense

Following is my component code

<Typography component="body2" variant="h5" style={{marginLeft: "5%"}}>
    Trending posts:
</Typography>

1 Answer

5 years ago by

For body2 type you should not mention the component. As that's not a valid HTML element. Change your code to following

<Typography variant="body2">
    Live From Space
</Typography>
5 years ago by Karthik Divi