Warning: The tag is unrecognized in this browser
The React warning "The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter." occurs when we use a tag that doesn't exist in HTML or in the browser. This warning will also occur when we try to render a component starting with a lowercase letter.
Let us the below code.
// Throws warning "The tag is unrecognized in this browser"
const MyComponent = () => {
return <text>Some sample text!</text>;
}
export default MyComponent
In this code, you have noticed <text>
tag which does not exist in the HTML or in the browser. This will throw React warning: The tag is unrecognized in this browser. If we are trying to render a component, then it should be starting with an uppercase letter.
Let's take the below code which shows the warning "The tag is unrecognized in this browser".
// Throws warning "The tag is unrecognized in this browser"
const alert = () => {
return <p>This is a alert!</p>;
}
const MyComponent = () => {
return <alert/>;
}
export default MyComponent
In this code, the component name alert
is starting in lowercase. So react consider alert
as a built-in tag in the browser. But, there is no built-in alert tag in HTML and it throws the warning. For solving this warning start the component with an uppercase letter.
For components, react expect a component's name starting in uppercase. To solve the error in the above code capitalize the first letter of alert
as given below code.
const Alert = () => {
return <p>This is a alert!</p>
}
const App = () => {
return <Alert/>
}
export default App
Once we capitalize the first letter of our component's name, React considers it a custom component. This is the convention React uses to differentiate between components we write and built-in tags that exist in the browser.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
How to pass event and parameter onClick in React
Each child in a list should have a unique "key" prop
Only one default export allowed per module
The style prop expects a mapping from style properties to values, not a string
ERESOLVE unable to resolve dependency tree error when installing npm packages
Too many re-renders. React limits the number of renders to prevent an infinite loop
Get the Mouse Position (coordinates) in React
How to use Profiler API in React to measure render performance
Explore All Blogs