Define a HTML class in JSX

Curriculum Help
1

Tell us what’s happening:
I assigned the class myDiv the JSX variable using the className property but no effect. How to define a class inJSX?

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:

2

Adding a class in JSX is essentially the same as it is in HTML. In HTML you would write:

<div class="the-class-name">

The only difference in JSX is that since class is a reserved word in JS, you have to use the word className instead.

Does that make it clear or do you need more help.

3

Thanks @kevinSmith for I added the className property as an attribute to the div and it works. So it’s like this we assign a class in JSX ?!

4

Yes, that is the way. As I said, it’s basically the same as HTML but you just JS won’t let React use class because it is a reserved word in JS so React has to use className. It takes a little while to get used to and you’ll forget it a few times. And a few times you’ll go back to HTML and make the opposite mistake. But you’ll get the hang of it.