freeCodeCamp/curriculum/challenges/english/03-front-end-development-libraries/react/add-comments-in-jsx.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5e	Add Comments in JSX	6	301376	add-comments-in-jsx

--description--

JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this.

To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text.

--instructions--

The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided div element, without modifying the existing h1 or p elements.

--hints--

The constant JSX should return a div element.

assert(JSX.type === 'div');

The div should contain an h1 tag as the first element.

assert(JSX.props.children[0].type === 'h1');

The div should contain a p tag as the second element.

assert(JSX.props.children[1].type === 'p');

The existing h1 and p elements should not be modified.

assert(
  JSX.props.children[0].props.children === 'This is a block of JSX' &&
    JSX.props.children[1].props.children === "Here's a subtitle"
);

The JSX should use valid comment syntax.

assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

const JSX = (
  <div>
    <h1>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
  </div>
);

--solutions--

const JSX = (
<div>
  <h1>This is a block of JSX</h1>
  { /* this is a JSX comment */ }
  <p>Here's a subtitle</p>
</div>);