1.9 KiB
1.9 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036160 | Define an HTML Class in JSX | 6 | false |
Description
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
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>);