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.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Call multiple functions onClick in React

Call multiple functions onClick in React

To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.