Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Create Functional Components | Reusable Components and Data Flow
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Introduction to React

bookChallenge: Create Functional Components

Create a functional React component that displays a greeting message using props.

The task consists of two parts:

  1. Create a child component
    • Create a component called Greeting.
    • Accept a prop called name.
    • Render an h2 element with the text: Hello, {name}.
  2. Create a parent component
    • Create a component called App.
    • Render the Greeting component inside it.
    • Pass the value "Oliver" to the name prop.
  3. Render the App component
    • Render the App component using root.render.
  • The child component receives data using props.
  • Use {props.name} inside JSX.
  • Pass the name prop when rendering Greeting.
  • The App component should be rendered to the DOM.
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookChallenge: Create Functional Components

Swipe to show menu

Create a functional React component that displays a greeting message using props.

The task consists of two parts:

  1. Create a child component
    • Create a component called Greeting.
    • Accept a prop called name.
    • Render an h2 element with the text: Hello, {name}.
  2. Create a parent component
    • Create a component called App.
    • Render the Greeting component inside it.
    • Pass the value "Oliver" to the name prop.
  3. Render the App component
    • Render the App component using root.render.
  • The child component receives data using props.
  • Use {props.name} inside JSX.
  • Pass the name prop when rendering Greeting.
  • The App component should be rendered to the DOM.
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 2
some-alt