What does the className attribute mean in JSX?

Question

I'm trying to figure out some sample JavaScript/React/Enzyme code and getting totally confused on what className attribute means in the JSX part of ReactTestObj below.

I know className in JSX is used because class is a reserved keyword in JavaScript, but I thought the className/class attribute in JSX/HTML was a reserved keyword for referencing a CSS class? If there is no CSS as in my example, what is the legal use of class/className other than referencing CSS classes?

import React from 'react';

export class ReactTestObj extends React.Component<Props, State> {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={'outer'}>
        <div className={'inner'}>
          <span className={'prop'}>prop</span>
          <span className={'state'}>state</span>
          <button
            className="activate"
            onClick={function() {

            }}>
            {this.props.value}
          </button>
        </div>
      </div>
    );
  }
}

and the sample test code for context:

import { mount, React, expect } from '../specHelper';
import { ReactTestObj } from '../../src/components/ReactTest';

describe('ReactTest', () => {
  it('should have an outer div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.outer')).to.exist;
  });
  it('should have an inner div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.inner')).to.exist;
  });
  it('should have a prop', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.prop')).to.exist;
  });

  it('should have a state and it should be set to 10', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.state')).to.exist;
    expect(wrapper.find('.state')).value('state');
  });

`class` is a reserved word in javascript. `className` is just a workaround. — Daniel A. White, Mar 31 '19 at 20:37
https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16 — Md Ashiqur Rahman, Mar 31 '19 at 20:38
Did you try googling "React classname"? [This](https://reactjs.org/docs/dom-elements.html) came right up. There is no `className` attribute in HTML, it's `class`. — jonrsharpe, Mar 31 '19 at 20:48
I did and I saw that which lead to my question what CSS class is className referencing in my sample code? there is no CSS in my sample code so what does className mean in this case? — driftwood, Mar 31 '19 at 20:58
Possible duplicate of [class vs className in React 16](https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16) — Nino Filiu, Mar 31 '19 at 21:30
it's not a duplicate because I am asking a completely different question — driftwood, Mar 31 '19 at 21:31
*"there is no CSS in my sample code"* - so what? You can use classes for things other than styles, like using them to select elements in the tests you've posted. If you want to know about classes in HTML in general see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class, but it's not clear to me what you're asking here. — jonrsharpe, Mar 31 '19 at 21:32
that was my question....what is class used for...when i asked people not in SO i got the impression that class attr in HTML is used exclusively to reference CSS...it seems like it is generic and can be used for referencing anything, CSS class or non CSS class — driftwood, Mar 31 '19 at 21:34
There's no such thing as a "CSS class". There's an HTML element attribute named class, and a CSS selector that can be used to match a class. I'd recommend reading up on the basics of web dev, e.g. via https://developer.mozilla.org/en-US/docs/Learn, before adding React and Enzyme on top, or very little will make sense. But, even if it *was* only for use in CSS, it'd still have to be valid in the HTML to begin with, no? — jonrsharpe, Mar 31 '19 at 22:07

M. Carr · Answer 1 · 2021-07-21T04:14:20.557

9

className is used instead of class in JSX because class is a JavaScript keyword. All JSX gets turned into vanilla JavaScript. If you wrote class it would try to make a JavaScript class and not make an element that has a class.

So, when you write react it looks like this.

const name = 'Maddie';
const element = <h1 className="myName">Hello, {name}</h1>;

Then something like babel will take that code and turn it into vanilla JavaScript:

var name = 'Maddie';
var element = React.createElement("h1", {
  className: "myName"
}, "Hello, ", name);

In vanilla JavaScript className is used to assign classes because the class keyword makes a different type of class.

edited Jul 21 '21 at 04:14

answered Mar 31 '19 at 20:37

M. Carr

107
1
8

i guess my question is more about what does class (className) attribute mean in HTML? is it to reference css or is it more generic. seems like I am missing something basic about web development – driftwood Mar 31 '19 at 20:44
Yup! It is for CSS. – M. Carr Mar 31 '19 at 20:47
So in traditional HTML you use class to add a class and when you are using JSX you use className to add a class, but they both do the same thing. – M. Carr Mar 31 '19 at 20:48
but if class is used to reference a css style what style is it referencing in your example? or my example? – driftwood Mar 31 '19 at 20:51
1

There would be another document for CSS that would have styles in it. For example, I might have some CSS that would affect the myName class and make the color blue. `.myName{color: blue}` – M. Carr Mar 31 '19 at 20:52

score 0 · Answer 2 · answered Mar 31 '19 at 20:37

className is the javascript handler to define and read the html class of a node

those are mostly used to search the site for element that are in the same group (like all elements that are part of a list etc) and to define style properties through css for that group of elements

What does the className attribute mean in JSX?

2 Answers2