Borislav Hadzhiev
Mon Apr 04 2022·2 min read
Photo by Taylor Wright
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.
Here is an example of how the error occurs:
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.
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.
The error is also caused when we have incorrect order of opening and closing tags.
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.
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.