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 is 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 an component, then it should be starting with 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 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.