Functional components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple React functional component named 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

Forgetting quotes around the string

Using curly braces incorrectly

Using angle brackets inside JSX text

The component must return JSX with a string inside quotes. So the correct answer is a string literal inside quotes.

2fill in blank

medium

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

React

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

function Counter() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

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

AuseState

BuseEffect

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState

Not importing the hook

Trying to use state without a hook

useState is the hook to create state in functional components.

3fill in blank

hard

Fix the error in the component by completing the code to correctly handle a button click event.

React

function Clicker() {
  const [clicked, setClicked] = React.useState(false);
  return <button onClick=[1]>Click me</button>;
}

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

A() => setClicked(true)

BsetClicked(true)

CsetClicked

Dclicked = true

Attempts:

3 left

💡 Hint

Common Mistakes

Calling setClicked directly instead of passing a function

Trying to assign clicked directly

Passing setClicked without calling it

The onClick expects a function, so we pass an arrow function that calls setClicked(true).

4fill in blank

hard

Fill both blanks to create a functional component that accepts props and displays a greeting.

React

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

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

Aname

Bprops

Cname.first

Dprops.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using props without destructuring

Trying to access nested properties without correct syntax

Passing the whole props object but using wrong property

The component destructures the prop 'name' and uses it directly inside JSX.

5fill in blank

hard

Fill all three blanks to create a functional component that maps over an array of items and renders them as list elements.

React

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

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

Aitem

Bindex

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name for both parameters

Not providing a key prop for list items

Using item instead of index as key

We name the first parameter 'item', the second 'index', and use 'index' as the key for list items.