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.