React - Learn About Self-Closing JSX Tags

JavaScript
1

What am I doing wrong? I googled and it seemed like I “closed” the incorrect tags by adding a slash already. Is there something else I’m missing? or is this another bug?

image
image885×583 31.5 KB

2

Hi,

JSX doesn’t need curly braces to be rendered. You need them if you need to compute any Javascript inside the JSX.

1 Like
3

Ah. Thank you! It was confusing because they were already there (with pre-written comments that they asked me to remove)! Thank you!!

2 Likes
4

Just to clarify: I just reviewed the lesson where this code is shown and the curly braces are required:

const JSX = (
  <div>
    {/* remove comment and change code below this line
    <h2>Welcome to React!</h2> <br >
    <p>Be sure to close all tags!</p>
    <hr >
    remove comment and change code above this line */}
  </div>
);

Here, the curly braces are part of the problem to be solved actually. You got rid of the comments but left the curly braces and, since React doesn’t find any Javascript other than JSX to compute, it doesn’t work as you expect.

Curly braces as useful in this case, for example:

const framework = 'React';
const JSX = (
  <div>
    <h2>Welcome to  {framework}!</h2> <br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);

Notice the curly braces inside the h2 tag. React finds the curly braces, compute the Javascript code written inside of them (in this case the variable framework), and renders the output to the JSX code.

Actually, the code above also passes the tests for that lesson.

Hope it helped you clarify the concept of curly braces in React.

Happy coding!

2 Likes
5

Wow! Okay! So curly braces in React are only if there is Javascript in them. Thanks!!

1 Like