JSX syntax rules in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to correctly render a JSX element.

React

const element = <div[1]>Hello World</div>;

Drag options to blanks, or click blank then click option'

A class="greeting"

B className="greeting"

C classname="greeting"

D className=greeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'className'

Not quoting the attribute value

Using lowercase 'classname'

In JSX, the correct way to add a CSS class is using className with quotes around the value.

2fill in blank

medium

Complete the code to correctly embed a JavaScript expression inside JSX.

React

const name = "Alice";
const element = <h1>Hello, [1]!</h1>;

Drag options to blanks, or click blank then click option'

A{name}

B[name]

Cname

D"name"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without braces

Using quotes around the variable name

Using array brackets

In JSX, JavaScript expressions must be wrapped in curly braces {} to be evaluated.

3fill in blank

hard

Fix the error in the JSX code by completing the blank.

React

const element = <input type="checkbox" [1] />;

Drag options to blanks, or click blank then click option'

Achecked="true"

Bchecked

Cchecked={true}

Dchecked=true

Attempts:

3 left

💡 Hint

Common Mistakes

Using just the attribute name without value

Using quotes around true

Assigning true without braces

In JSX, boolean attributes must be set using curly braces with a boolean value, like checked={true}.

4fill in blank

hard

Fill both blanks to correctly write a JSX fragment with two elements.

React

return (
  <>
    <h1[1]>Title</h1>
    <p[2]>Paragraph</p>
  </>
);

Drag options to blanks, or click blank then click option'

A className="header"

B class="header"

C className="text"

D class="text"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'className'

Not quoting attribute values

Use className with quotes for both elements to add CSS classes in JSX.

5fill in blank

hard

Fill all three blanks to create a JSX element with a dynamic style and event handler.

React

const buttonStyle = { color: 'blue' };

return (
  <button style=[1] onClick=[2] disabled=[3]>
    Click me
  </button>
);

Drag options to blanks, or click blank then click option'

AbuttonStyle

B() => alert('Clicked!')

Cfalse

DbuttonStyle.color

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of a function to onClick

Passing a string instead of a boolean to disabled

Passing a property instead of the whole style object

Use the buttonStyle object for style, a function for onClick, and a boolean for disabled.