What is a component in React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

A{Hello, friend!}

BHello, friend!

C<Hello, friend!>

D"Hello, friend!"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the text

Using curly braces without quotes for plain text

The component returns a heading with the greeting text inside quotes to show it as a string.

2fill in blank

medium

Complete the code to use the Greeting component inside another component.

React

function App() {
  return <div>[1]</div>;
}

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

AGreeting()

B<Greeting />

C"Greeting"

D{Greeting}

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the component like a function inside JSX

Using quotes around the component name

To use a React component inside JSX, write it as a tag with a capitalized name and a closing slash.

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"<h2>Welcome!</h2>"

Bh2>Welcome!</h2>

C<h2>Welcome!</h2>

D{<h2>Welcome!</h2>}

Attempts:

3 left

💡 Hint

Common Mistakes

Missing opening angle bracket

Returning a string instead of JSX

The return statement must return valid JSX with tags properly enclosed in angle brackets.

4fill in blank

hard

Fill both blanks to create a component that shows a message inside a section with a class.

React

function Message() {
  return <section className=[1]>[2]</section>;
}

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

A"info"

B"Hello from React!"

CHello from React!

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out quotes around className value

Not quoting the text inside the section

The className attribute needs a string with quotes. The content inside the section is also a string in quotes.

5fill in blank

hard

Fill all three blanks to create a component that returns a list with three items.

React

function List() {
  return (
    <ul>
      <li>[1]</li>
      <li>[2]</li>
      <li>[3]</li>
    </ul>
  );
}

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

A"Apple"

B"Banana"

C"Cherry"

D"Date"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the fruit names

Using curly braces without quotes for plain text

Each list item needs a string inside quotes to display the fruit names correctly.