2018-09-30 22:01:58 +00:00
---
id: 5a24c314108439a4d4036160
title: Define an HTML Class in JSX
challengeType: 6
2019-08-05 16:17:33 +00:00
forumTopicId: 301393
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
Now that you're getting comfortable writing JSX, you may be wondering how it differs from HTML.
2020-11-27 18:02:05 +00:00
So far, it may seem that HTML and JSX are exactly the same.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Apply a class of `myDiv` to the `div` provided in the JSX code.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The constant `JSX` should return a `div` element.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert.strictEqual(JSX.type, 'div');
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
The `div` should have a class of `myDiv` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert.strictEqual(JSX.props.className, 'myDiv');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
## --after-user-code--
2018-09-30 22:01:58 +00:00
2020-07-13 16:58:50 +00:00
```jsx
2018-10-20 18:02:47 +00:00
ReactDOM.render(JSX, document.getElementById('root'))
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```jsx
const JSX = (
< div >
< h1 > Add a class to this div< / h1 >
< / div >
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2020-07-13 16:58:50 +00:00
```jsx
2018-09-30 22:01:58 +00:00
const JSX = (
< div className = 'myDiv' >
< h1 > Add a class to this div< / h1 >
< / div > );
```