Why React is used - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React component that displays a greeting.

React

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

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

A"Hello, world!"

BHello, world!

C<Hello, world!>

D{Hello, world!}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around text inside JSX.

Using curly braces without quotes for plain text.

The text inside JSX must be a string wrapped in quotes.

2fill in blank

medium

Complete the code to use React's useState hook to create a counter.

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.

Trying to use state without importing useState.

useState is the hook to add state in functional components.

3fill in blank

hard

Fix the error in the React component that updates state on button click.

React

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick=[1]>
      Count: {count}
    </button>
  );
}

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

A() => setCount(count + 1)

Bcount + 1

C() => count + 1

DsetCount(count + 1)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling setCount directly instead of passing a function.

Using expressions instead of functions for onClick.

The onClick handler must be a function. Using an arrow function calls setCount correctly on click.

4fill in blank

hard

Fill both blanks to create a controlled input component in React.

React

function NameInput() {
  const [name, setName] = React.useState('');
  return (
    <input
      value=[1]
      onChange={e => [2](e.target.value)}
      aria-label="Name input"
    />
  );
}

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

Aname

BsetName

Cname()

DsetName()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name()' instead of 'name' for value.

Calling 'setName()' without argument.

The input's value is the state variable 'name'. The onChange calls 'setName' to update it.

5fill in blank

hard

Fill all three blanks to create a React component that fetches data on mount using useEffect.

React

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

function DataFetcher() {
  const [data, setData] = [3](null);

  [1](() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  if (!data) return <p>Loading...</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

AuseEffect

BuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import useEffect or useState.

Using useContext instead of useState for state.

useEffect runs code on mount. useState creates state. The component uses both to fetch and store data.