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.