Learn
Another JSX ‘gotcha’ involves self-closing tags.
What’s a self-closing tag?
Most HTML elements use two tags: an opening tag (<div>
), and a closing tag (</div>
). However, some HTML elements such as <img>
and <input>
use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a self-closing tag.
When you write a self-closing tag in HTML, it is optional to include a forward-slash immediately before the final angle-bracket:
Fine in HTML with a slash: <br /> Also fine, without the slash: <br>
But!
In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error:
Fine in JSX: <br /> NOT FINE AT ALL in JSX: <br>
Instructions
1.
In app.js, fix the broken JSX by adding slashes to all of the self-closing tags.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.