Component organization in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a functional React component named Greeting.

React

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

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

AHello, world!

B"Hello, world!"

C<Hello, world!>

D{Hello, world!}

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving text unquoted inside JSX

Using angle brackets around text

The component must return JSX with a string inside quotes to render text correctly.

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'

AuseEffect

BComponent

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState

Trying to import Component in functional components

useState is the hook used to add state to functional components.

3fill in blank

hard

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

React

function Welcome() {
  return [1]
}

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

A<div>Welcome!</div>;

Bdiv>Welcome!</div>;

C"Welcome!";

D<Welcome!>;

Attempts:

3 left

💡 Hint

Common Mistakes

Missing opening angle bracket

Returning plain string without JSX tags

The return must be a valid JSX element wrapped in angle brackets and properly closed.

4fill in blank

hard

Fill both blanks to create a component that uses useState to toggle text.

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

CuseReducer

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect but calling useState

Using useReducer instead of useState

useState is imported and called to create state and its setter function.

5fill in blank

hard

Fill all three blanks to create a 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));
  }, []);

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

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

AuseEffect

BuseState

CuseContext

DuseReducer

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of useState for data

Not importing useEffect

useEffect is imported and used to run code on mount; useState is imported and used to hold data state.