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

id	title	challengeType	isRequired
5a24c314108439a4d4036160	Define an HTML Class in JSX	6	false

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.

Tests

tests:
  - text: The constant <code>JSX</code> should return a <code>div</code> element.
    testString: assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');
  - text: The <code>div</code> has a class of <code>myDiv</code>.
    testString: assert.strictEqual(JSX.props.className, 'myDiv', 'The <code>div</code> has a class of <code>myDiv</code>.');

Challenge Seed

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

After Test

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

Solution

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