What is React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React functional component that returns a simple greeting.

React

function Greeting() {
  return <h1>[1]</h1>;
}

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

AHello, friend!

B{Hello, friend!}

C"Hello, friend!"

D<Hello, friend!>

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes (C) renders visible quotes.

Angle brackets (A) create invalid nested elements.

Braces without a valid expression (D) cause syntax errors.

In JSX, text content is placed directly between the opening and closing tags without quotes. Quotes would render as visible quotes in the output.

2fill in blank

medium

Complete the code to import React's useState hook.

React

import React, { [1] } from 'react';

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

AuseRef

BuseEffect

CuseContext

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState.

Forgetting to import the hook at all.

The useState hook is used to add state to functional components in React.

3fill in blank

hard

Fix the error in the React component by completing the return statement correctly.

React

function Welcome() {
  return [1];
}

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

A"Welcome to React!"

B<div>Welcome to React!</div>

CWelcome to React!

D{Welcome to React!}

Attempts:

3 left

💡 Hint

Common Mistakes

Returning plain text without JSX tags.

Returning a string literal without JSX.

React components must return JSX elements, which look like HTML tags. Returning just a string without JSX tags causes an error.

4fill in blank

hard

Fill both blanks to create a React component that uses useState to toggle text on button click.

React

import React, { [1] } from 'react';

function Toggle() {
  const [isOn, setIsOn] = [2](false);
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

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

AuseState

BuseEffect

CuseState()

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook.

Trying to use 'useState()' as if it were pre-called.

To use state in React, import useState and call it as a function to get the state and setter. Both blanks are filled with 'useState'.

5fill in blank

hard

Fill all three blanks to create a React component that displays a list of items using map.

React

function ItemList({ items }) {
  return (
    <ul>
      {items.[1](item => (
        <li key={item.[2]>{item.[3]</li>
      ))}
    </ul>
  );
}

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

Amap

Bid

Cname

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter instead of map.

Using a non-unique key or missing key.

Displaying the wrong property.

Use the map method to loop over items. Use a unique key like id for each list item. Display the name property inside the list item.