freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036160	Define an HTML Class in JSX	6	301393	define-an-html-class-in-jsx

--description--

Now that you're getting comfortable writing JSX, you may be wondering how it differs from HTML.

So far, it may seem that HTML and JSX are exactly the same.

One key difference in JSX is that you can no longer use the word class to define HTML classes. This is because class is a reserved word in JavaScript. Instead, JSX uses className.

In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward.

--instructions--

Apply a class of myDiv to the div provided in the JSX code.

--hints--

The constant JSX should return a div element.

assert.strictEqual(JSX.type, 'div');

The div should have a class of myDiv.

assert.strictEqual(JSX.props.className, 'myDiv');

--seed--

--after-user-code--

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

--seed-contents--

const JSX = (
  <div>
    <h1>Add a class to this div</h1>
  </div>
);

--solutions--

const JSX = (
<div className = 'myDiv'>
  <h1>Add a class to this div</h1>
</div>);