React Fundamentals

0% completed

Previous
Next
Code Challenge

Challenge 1: Passing and Receiving Props

Follow these instructions to complete your challenge:

  1. Create a functional component called UserInfo in the App.jsx file.
  2. The UserInfo component should receive name and email as props and display them inside an <h2> and <p> tag, respectively.
  3. In the App component, pass the values "Alice Johnson" for name and "alice@example.com" for email to UserInfo.
  4. Render UserInfo inside App.

Expected Output on Screen:

User: Alice Johnson  
Email: alice@example.com

Challenge 2: Passing Props through Multiple Levels

Follow these instructions to complete your challenge:

  1. In the App.jsx file, create two functional components: Parent, and Child.
  2. In the App component, define a variable called message with the value "Hello from App!".
  3. Pass message as a prop from App to Parent, and then from Parent to Child.
  4. In the Child component, display the message inside an <h3> tag.

Expected Output on Screen:

Hello from App!

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next