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.

Practice

1. What is a React functional component?

easy

A. A JavaScript function that returns JSX to render UI

B. A class that extends React.Component

C. A CSS style sheet for React components

D. A special HTML tag used in React

Solution

1. Step 1: Understand React component types

   React components can be functions or classes that return UI elements.

2. Step 2: Identify functional component definition

   A functional component is a plain JavaScript function returning JSX, not a class or style.

3. Final Answer:

   A JavaScript function that returns JSX to render UI -> Option A

4. Quick Check:

   Functional component = function returning JSX [OK]

Hint: Functional components are just functions returning JSX [OK]

Common Mistakes:

• Confusing functional components with class components
• Thinking functional components are CSS or HTML tags
• Believing functional components must extend React.Component

2. Which of the following is the correct syntax for a React functional component named Greeting?

easy

A. const Greeting = Hello!;

B. function Greeting() { return Hello!; }

C. class Greeting extends React.Component { render() { return Hello!; } }

D. function Greeting { return Hello!; }

Solution

1. Step 1: Check function declaration syntax

   function Greeting() { return

   Hello!

   ; } correctly declares a function with parentheses and returns JSX.

2. Step 2: Identify syntax errors in other options

   const Greeting =

   Hello!

   ; assigns JSX directly without a function wrapper; class Greeting extends React.Component { render() { return

   Hello!

   ; } } is a class component, not functional; function Greeting { return

   Hello!

   ; } misses parentheses in function declaration.

3. Final Answer:

   function Greeting() { return

   Hello!

   ; } -> Option B

4. Quick Check:

   Function syntax with parentheses and return JSX [OK]

Hint: Functional components need parentheses after function name [OK]

Common Mistakes:

• Omitting parentheses in function declaration
• Confusing class components with functional components
• Assigning JSX directly without a function

3. What will be rendered by this React functional component?

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Usage: <Welcome name="Alice" />

medium

A. <Welcome name="Alice" />

B. Hello, {props.name}!

C. Error: props is undefined

D. <h2>Hello, Alice!</h2>

Solution

1. Step 1: Understand props usage in functional components

   The component receives props and uses props.name inside JSX to display the name.

2. Step 2: Substitute props.name with passed value

   Since name="Alice" is passed, {props.name} becomes "Alice" in the output.

3. Final Answer:

   <h2>Hello, Alice!</h2> -> Option D

4. Quick Check:

   props.name replaced by "Alice" in JSX output [OK]

Hint: Props values replace placeholders inside JSX [OK]

Common Mistakes:

• Thinking JSX shows literal {props.name} text
• Assuming props is undefined without passing
• Confusing component usage with rendered output

4. Identify the error in this React functional component:

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

medium

A. Missing return statement

B. Incorrect JSX syntax inside return

C. useState is not imported from React

D. setCount should not be called inside onClick

Solution

1. Step 1: Check useState usage

   useState is a React hook and must be imported explicitly from 'react'.

2. Step 2: Verify other code parts

   The return statement and JSX syntax are correct; calling setCount in onClick is valid.

3. Final Answer:

   useState is not imported from React -> Option C

4. Quick Check:

   Hooks require import from React [OK]

Hint: Always import useState from React before using it [OK]

Common Mistakes:

• Forgetting to import useState
• Thinking setCount can't be called in event handlers
• Assuming JSX syntax errors without checking imports

5. You want to create a functional component that shows a list of items passed as props and highlights the selected item on click. Which approach correctly uses hooks and props together?

hard

A. Use useState to track selected item and map props.items to render list with onClick handlers updating state

B. Use class component with this.state and this.props to manage selected item and render list

C. Use useEffect to directly modify props.items and highlight selected item

D. Render props.items without state and rely on CSS :hover to highlight selection

Solution

1. Step 1: Understand state and props roles

   Props provide data (items), state tracks UI changes (selected item).

2. Step 2: Choose correct React hooks usage

   useState is used to track selected item; mapping props.items with onClick updates state correctly.

3. Step 3: Evaluate other options

   Class components are outdated here; useEffect should not modify props; CSS :hover can't track selection state.

4. Final Answer:

   Use useState to track selected item and map props.items to render list with onClick handlers updating state -> Option A

5. Quick Check:

   State for selection + props for data = Use useState to track selected item and map props.items to render list with onClick handlers updating state [OK]

Hint: Use useState for UI changes, props for data input [OK]

Common Mistakes:

• Trying to modify props directly
• Using class components instead of functional with hooks
• Relying on CSS hover for persistent selection