What is JSX in React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React component that returns a heading using JSX.

React

function Hello() {
  return ([1]);
}

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

Aconsole.log('Hello, world!')

B"Hello, world!"

C<h1>Hello, world!</h1>

DReact.createElement('h1', null, 'Hello, world!')

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a string instead of JSX

Using console.log inside return

Using React.createElement instead of JSX here

JSX looks like HTML inside JavaScript. Here, <h1>Hello, world!</h1> is JSX that React understands and renders as a heading.

2fill in blank

medium

Complete the JSX code to display a paragraph with the text 'Welcome to React!'.

React

const element = [1];

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

A{Welcome to React!}

B"Welcome to React!"

CReact.createElement('p', null, 'Welcome to React!')

D<p>Welcome to React!</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes without tags

Using curly braces without tags

Using React.createElement instead of JSX here

JSX uses HTML-like tags. Here, <p>Welcome to React!</p> is the correct JSX to create a paragraph element.

3fill in blank

hard

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

React

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

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

A{' '}

B' '

C" "

D<br/>

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain quotes inside JSX tags

Using HTML tags like
incorrectly

Leaving no space causing words to stick together

In JSX, to add a space between elements or text, use curly braces with a string: {' '}. Plain quotes inside tags cause errors.

4fill in blank

hard

Fill both blanks to create a JSX expression that shows a list of items from an array.

React

const items = ['Apple', 'Banana', 'Cherry'];
const list = <ul>[1].map((item) => <li key={item}>[2]</li>)</ul>;

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

Aitems

Bitem

Cfruits

Dfruit

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names like 'fruits' or 'fruit'

Not using map to loop over the array

Forgetting to use key attribute in list items

We use items.map to loop over the array and item to show each fruit inside list items.

5fill in blank

hard

Fill all three blanks to create a React component that uses JSX to display a greeting with a name prop.

React

function Greeting([1]) {
  return <h1>Hello, [2]!</h1>;
}

const element = <Greeting [3]="Alice" />;

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

Aname

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the prop in different places

Forgetting to destructure props in the function parameter

Passing props with wrong attribute names

The component receives a prop called name. We use it inside JSX and pass it as an attribute when using the component.