CodeBlanks Logo Icon CodeBlanks
Login Register

Attributes and className

Learn how attributes are written in JSX and that className replaces class.

Attributes and className

In JSX you write HTML attributes, but some get different names. The most common: className instead of class, htmlFor instead of for.

Attribute names use camelCase: tabIndex, readOnly, maxLength. Values are strings in double quotes or expressions in curly braces: <img src="logo.png" /> or <img src={logo} />.

For boolean attributes prefer disabled={true} over the bare disabled. JSX accepts both, but being explicit is clearer.

camelCase attributes

In JSX attributes use camelCase; the dashed names from HTML become one piece. Use maxLength instead of maxlength, tabIndex instead of tabindex.

Event attributes are camelCase too: not onclick but onClick, not onchange but onChange. You pass them a function, not a string.

The style attribute is special: it takes an object with camelCase keys. style={{ color: 'red' }} is right, style="color:red" is wrong.

Practice Write a card with className

Complete the skeleton. Write a component called Card that returns <div className="card"> with <p>Welcome</p> inside, and export it.

Starter code

App.jsx
// Write the Card component here

Sample solution

App.jsx
function Card() {
  return <div className="card"><p>Welcome</p></div>;
}

export default Card;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What replaces class?

  • classes
  • cssClass
  • className Correct answer
  • class

Explanation: class is replaced by className because class is a reserved word in JavaScript.

2 Using htmlFor

Question 
<label ____="email">Email</label>
Answer 
<label htmlFor="email">Email</label>

Explanation: for is replaced by htmlFor.

3 Match the attributes

Term Meaning
className class
htmlFor for
onClick onclick
maxLength maxlength

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu