Attributes, and Why They Are Renamed

What this is. JSX attributes are named after DOM properties rather than HTML attributes, because you are setting properties on an object rather than writing a document.

Most become camelCase. Two are renamed outright: class becomes className and for becomes htmlFor, because both are reserved words in JavaScript.

The same element, two languages

HTML

<label for="email">Email</label>
<input id="email" class="field"
       maxlength="40" readonly>
<br>

JSX

<label htmlFor="email">Email</label>
<input id="email" className="field"
       maxLength={40} readOnly />
<br />

Compare → Note the closing slashes. JSX has no void elements, so every tag closes, including br, hr, img and input. Forgetting that slash is the most common first-week syntax error.

Quotes or braces. Quotes for a literal string, braces for a value.

src="logo.png" is the literal text. src={logoUrl} is the variable. Writing src="{logoUrl}" gives you the literal characters, braces and all, which is a bug that is easy to stare straight past.

Try it

Change size to 60. Both the width and the height follow, because they read the same variable.

loading editor…

loading React…

The style prop takes an object, not a string. The outer braces mean 'a value follows' and the inner ones are the object literal, which is why there are two.

◈ Graded Component

Render a labeled input. The label must read Search and be properly associated with an input whose id is q. Give the input a className of field and a maxLength of 60. Above them, render an h1 containing the text Knowledge Explorer.

Checked against what your component renders and how it responds, not against how you wrote it. 4 visible and 2 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back