Parent-child data flow in React - Mini Project: Build & Apply

Parent-child data flow in React

📖 Scenario: You are building a simple React app where a parent component holds a message and passes it to a child component to display.

🎯 Goal: Create a parent component that stores a message string and passes it as a prop to a child component. The child component should display the message inside a paragraph.

📋 What You'll Learn

Create a parent component called Parent with a message state variable

Create a child component called Child that accepts a message prop

Pass the message from Parent to Child as a prop

Render the Child component inside Parent

Display the message inside a <p> tag in Child

💡 Why This Matters

🌍 Real World

Passing data from parent to child components is a fundamental pattern in React apps for building reusable UI parts.

💼 Career

Understanding parent-child data flow is essential for React developers to manage component communication and state effectively.

1

Create the Parent component with a message state

Create a React functional component called Parent. Inside it, create a state variable called message using useState and set its initial value to "Hello from Parent".

React

import React, { useState } from 'react';

function Parent() {
  // Your code here
}

Need a hint?

Use useState to create the message state inside Parent.

2

Create the Child component that accepts a message prop

Create a React functional component called Child that accepts a prop named message. Inside the component, return a <p> element that displays the message prop.

React

import React, { useState } from 'react';

function Parent() {
  const [message, setMessage] = useState("Hello from Parent");
  return null;
}

// Your code here

Need a hint?

Use destructuring in the function parameter to get the message prop.

3

Pass the message prop from Parent to Child

Inside the Parent component's return statement, render the Child component and pass the message state as a prop named message.

React

import React, { useState } from 'react';

function Parent() {
  const [message, setMessage] = useState("Hello from Parent");
  // Your code here
}

function Child({ message }) {
  return {message};
}

Need a hint?

Use JSX to render <Child message={message} /> inside Parent.

4

Export the Parent component as default

Add an export statement to export the Parent component as the default export of the module.

React

import React, { useState } from 'react';

function Parent() {
  const [message, setMessage] = useState("Hello from Parent");
  return ;
}

function Child({ message }) {
  return {message};
}

// Your code here

Need a hint?

Use export default Parent; at the end of the file.