Expected corresponding JSX closing tag error in React

avatar

Borislav Hadzhiev

Last updated: Apr 4, 2022

banner

Photo from Unsplash

Expected corresponding JSX closing tag error in React #

The React.js error "Expected corresponding JSX closing tag" occurs when we forget to close a tag in our JSX code. To solve the error use a self closing tag, e.g. <input /> and make sure the order of opening and closing tags is correct in your JSX code.

expected corresponding jsx closing tag for

Here is an example of how the error occurs:

App.js
export default function App() { // ⛔️ Expected corresponding JSX closing tag for <input>. return ( <div> <h1>Hello world</h1> <input id="icon_prefix" type="text" class="validate"> </div> ) }

The issue in the example is that we forgot to close the tag of the input element.

We can use a self-closing tag to solve the error.

App.js
export default function App() { return ( <div> <h1>Hello world</h1> <input id="icon_prefix" type="text" class="validate" /> </div> ); }

We used a self-closing tag for the input element. So instead of using <input>, which caused the error, we used <input />.

The error is also commonly caused for img elements. Make sure to always close your img tags as <img src="..." />.

The same goes for <br /> and <hr /> tags.

We always have to either close the tag or use a self-closing tag because otherwise React expects us to pass a children prop to the component.

The error is also caused when we have incorrect order of opening and closing tags.

App.js
export default function App() { // ⛔️ Expected corresponding JSX closing tag for <input>. return ( <div> <h1>Hello world <span>Hello 123</h1></span> </div> ); }

The issue in the code snippet above is that the h1 tag is open, then the span element starts, then the h1 tag is closed before the span element.

To solve the error in this situation, we have to close the span tag first.

App.js
export default function App() { return ( <div> <h1> Hello world <span>Hello 123</span> </h1> </div> ); }

Always use closing tags or self-closing tags because if React only finds an opening tag, then it expects that we are going to pass a children prop to the element and then close it.

Conclusion #

The React.js error "Expected corresponding JSX closing tag" occurs when we forget to close a tag in our JSX code. To solve the error use a self-closing tag, e.g. <input /> and make sure the order of opening and closing tags is correct in your JSX code.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.