Parent-child data flow in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named message from the parent to the child component.

React

function Parent() {
  const greeting = "Hello!";
  return <Child [1]={greeting} />;
}

function Child(props) {
  return <p>{props.message}</p>;
}

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

Amessage

Btext

Cmsg

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than the child expects.

Forgetting to pass the prop at all.

The parent passes a prop named message to the child. The child accesses it via props.message.

2fill in blank

medium

Complete the code to update the parent state when the child button is clicked.

React

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

function Child(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

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

AonPress

BhandleClick

CclickHandler

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the function with a different prop name.

Calling the function instead of passing it.

The parent passes a function prop named onClick. The child uses it as the button's click handler.

3fill in blank

hard

Fix the error in the child component to correctly receive and use the prop onAction.

React

function Child({ [1] }) {
  return <button onClick={onAction}>Do Action</button>;
}

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

AonAction

Bprops

Caction

DhandleAction

Attempts:

3 left

💡 Hint

Common Mistakes

Destructuring a wrong or different prop name.

Not destructuring and trying to use onAction directly.

Using destructuring, the child must name the prop exactly as onAction to use it directly.

4fill in blank

hard

Fill both blanks to pass a state value and its setter function from parent to child.

React

function Parent() {
  const [name, setName] = React.useState('Alice');
  return <Child [1]={name} [2]={setName} />;
}

function Child(props) {
  return <input value={props.name} onChange={e => props.setName(e.target.value)} />;
}

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

Aname

BsetName

Cvalue

DupdateName

Attempts:

3 left

💡 Hint

Common Mistakes

Using different prop names than the child expects.

Passing only the value or only the setter.

The parent passes the state name and the setter setName as props to the child.

5fill in blank

hard

Fill all three blanks to create a controlled input where the parent manages the state and the child updates it.

React

function Parent() {
  const [email, setEmail] = React.useState('');
  return <Child [1]={email} [2]={e => setEmail(e.target.value)} [3]="Enter email" />;
}

function Child({ [1], [2], [3] }) {
  return <input value={email} onChange={onChange} placeholder={placeholder} />;
}

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

Aemail

BonChange

Cplaceholder

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names between parent and child.

Forgetting to pass the placeholder prop.

The parent passes email, an onChange handler, and a placeholder string. The child destructures these props and uses them in the input.

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