Parent-child data flow in React - Step-by-Step Execution

Concept Flow - Parent-child data flow

Parent Component

↓

Child Component

↓

Child renders UI

↓

Parent updates state

↓

Parent re-renders and passes new props

The parent sends data down to the child via props. The child uses these props to display or act. If the child needs to send data back, it calls a function from the parent, which updates the parent's state and triggers a re-render.

Execution Sample

React

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} onClick={() => setCount(count + 1)} />;
}

function Child({ count, onClick }) {
  return <button onClick={onClick}>Count: {count}</button>;
}

Parent holds count state and passes it plus a click handler to Child. Child shows count and calls handler on click to update Parent.

Execution Table

Step	Parent State (count)	Props Passed to Child	Child Render Output	Action Taken
1	0	{count:0, onClick:function}	<button>Count: 0</button>	Initial render
2	0	{count:0, onClick:function}	User clicks button	Child calls onClick
3	1	{count:1, onClick:function}	<button>Count: 1</button>	Parent state updated, re-render
4	1	{count:1, onClick:function}	User clicks button	Child calls onClick
5	2	{count:2, onClick:function}	<button>Count: 2</button>	Parent state updated, re-render
6	2	{count:2, onClick:function}	No further clicks	Execution stops

💡 No more user clicks, so no state changes or re-renders occur.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	2	2

Key Moments - 2 Insights

Why does the child component update its displayed count when the parent state changes?

Because the parent passes the updated count as a prop to the child on each render (see execution_table rows 3 and 5). The child re-renders with new props automatically.

How does the child send data back to the parent to update the count?

The parent passes a function (onClick) as a prop to the child. When the child calls this function (execution_table rows 2 and 4), the parent updates its state.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of count in the parent state?

A 0

B 1

C 2

D undefined

💡 Hint

Check the 'Parent State (count)' column at step 3 in the execution_table.

At which step does the child component call the parent's onClick function for the second time?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Child calls onClick' in the 'Action Taken' column in execution_table.

If the parent did not pass the onClick function as a prop, what would happen when the button is clicked?

A The count would increase anyway

B The child would update its own count state

C Nothing would happen because child cannot update parent state

D An error would occur immediately

💡 Hint

Refer to how data flows from parent to child and how child calls parent's function in execution_table.

Concept Snapshot

Parent-child data flow in React:
- Parent holds state
- Parent passes data and functions as props to child
- Child uses props to render UI
- Child calls parent's function prop to send data back
- Parent updates state and re-renders
- Data flows down, events flow up

Full Transcript

In React, the parent component holds state and passes data to the child component using props. The child uses these props to display information. If the child needs to update the parent's state, it calls a function passed down from the parent as a prop. When the parent state changes, React re-renders the parent and child with updated props. This creates a clear one-way data flow from parent to child, and event flow from child to parent.

Practice

1. In React, how does a parent component send data to its child component?

easy

A. By importing the child's variables

B. By passing data as props to the child component

C. By using the child's setState method

D. By directly modifying the child's state

Solution

1. Step 1: Understand data flow in React

   React uses one-way data flow where parents send data down to children.

2. Step 2: Identify how data is passed

   Parents pass data to children using props, which are like function arguments.

3. Final Answer:

   By passing data as props to the child component -> Option B

4. Quick Check:

   Parent to child data flow = props [OK]

Hint: Remember: props flow down from parent to child [OK]

Common Mistakes:

• Trying to change child's state directly from parent
• Using child's setState from parent
• Importing child's variables instead of passing props

2. Which of the following is the correct syntax to pass a prop named title with value "Hello" from a parent to a child component Child?

easy

A. <Child>title="Hello"</Child>

B. <Child {title: "Hello"} />

C. <Child title="Hello" />

D. <Child>{title: "Hello"}</Child>

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes inside the component tag, like HTML attributes.

2. Step 2: Match correct syntax

   The correct way is <Child title="Hello" /> which sets prop title to "Hello".

3. Final Answer:

   <Child title="Hello" /> -> Option C

4. Quick Check:

   Props look like HTML attributes [OK]

Hint: Props look like HTML attributes inside component tags [OK]

Common Mistakes:

• Using object syntax inside JSX tags
• Placing props inside children instead of attributes
• Using curly braces incorrectly for props

3. Given the code below, what will be rendered inside the <Child /> component?

function Parent() {
  const message = "Hi there!";
  return <Child text={message} />;
}

function Child(props) {
  return <h1>{props.text}</h1>;
}

medium

A. Hi there!

B. text

C. {message}

D. Nothing will render

Solution

1. Step 1: Identify prop passed from Parent

   Parent passes prop named text with value "Hi there!" to Child.

2. Step 2: Check Child rendering

   Child renders <h1> with content from props.text, which is "Hi there!".

3. Final Answer:

   <h1>Hi there!</h1> -> Option A

4. Quick Check:

   props.text = "Hi there!" renders inside <h1> [OK]

Hint: Child renders what parent sends via props [OK]

Common Mistakes:

• Confusing prop name with string literal
• Expecting variable name to render instead of value
• Thinking nothing renders without explicit return

4. What is wrong with the following code that tries to pass data from parent to child?

function Parent() {
  const data = "Hello";
  return <Child data=data />;
}

function Child(props) {
  return <div>{props.data}</div>;
}

medium

A. Parent should use state instead of variable

B. Child component cannot receive props named data

C. Child must destructure props before use

D. The prop value should be inside curly braces: data={data}

Solution

1. Step 1: Check JSX prop syntax

   In JSX, to pass a JavaScript variable as prop value, use curly braces.

2. Step 2: Identify error in code

   Code uses data=data without braces, so it passes string "data" instead of variable value.

3. Final Answer:

   The prop value should be inside curly braces: data={data} -> Option D

4. Quick Check:

   JSX props need curly braces for variables [OK]

Hint: Use curly braces to pass variables as props [OK]

Common Mistakes:

• Omitting curly braces around variables in JSX props
• Thinking child cannot receive certain prop names
• Believing state is required to pass props

5. You want to pass a list of items from a parent to a child component and render them as a list. Which approach correctly implements this parent-child data flow?

function Parent() {
  const items = ["Apple", "Banana", "Cherry"];
  return <Child items={items} />;
}

function Child(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

hard

A. This code correctly passes the list and renders it in the child

B. The parent should convert the list to a string before passing

C. Child should not use map; it should render items directly

D. Key prop is not needed when rendering lists

Solution

1. Step 1: Check how data is passed

   Parent passes array items as prop named items using curly braces, which is correct.

2. Step 2: Check child rendering

   Child uses map to create <li> elements for each item with unique key, which is best practice.

3. Final Answer:

   This code correctly passes the list and renders it in the child -> Option A

4. Quick Check:

   Array props + map in child = correct list rendering [OK]

Hint: Pass arrays as props and map in child to render lists [OK]

Common Mistakes:

• Passing arrays as strings instead of arrays
• Not using keys when rendering lists
• Trying to render arrays directly without map