Common lifting state patterns in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lift state up by passing the state setter as a prop.

React

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

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

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

Acount

BsetCount

CuseState

DReact.useState

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state value instead of the setter function.

Trying to call useState inside the child component without lifting state.

The parent passes the setCount function to the child so the child can update the parent's state.

2fill in blank

medium

Complete the code to lift state up and handle input changes in the parent.

React

function Parent() {
  const [text, setText] = React.useState('');
  return <InputBox value={text} onChange=[1] />;
}

function InputBox({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

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

Atext

BsetText

C(e) => e.target.value

D(e) => setText(e.target.value)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function directly without wrapping in an event handler.

Using the state value instead of the event handler.

The parent handles the input change event and updates the state with the new input value.

3fill in blank

hard

Fix the error in lifting state up by completing the code to pass the correct prop name.

React

function Parent() {
  const [selected, setSelected] = React.useState(null);
  return <Child [1]={setSelected} />;
}

function Child({ onSelect }) {
  return <button onClick={() => onSelect('apple')}>Select Apple</button>;
}

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

Aselected

BsetSelected

ConSelect

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function with a different prop name than the child expects.

Passing the state value instead of the setter function.

The parent must pass the setter function as the onSelect prop to match the child's expected prop name.

4fill in blank

hard

Fill both blanks to lift state up and handle multiple inputs in the parent.

React

function Parent() {
  const [form, setForm] = React.useState({ name: '', age: '' });

  function handleChange(event) {
    const { name, value } = event.target;
    setForm({ ...form, [1]: [2] });
  }

  return <FormInputs form={form} onChange={handleChange} />;
}

function FormInputs({ form, onChange }) {
  return (
    <>
      <input name="name" value={form.name} onChange={onChange} />
      <input name="age" value={form.age} onChange={onChange} />
    </>
  );
}

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

A[name]

Bname

Cvalue

Dform

Attempts:

3 left

💡 Hint

Common Mistakes

Using a static key instead of dynamic property name.

Assigning the key to the variable name instead of the value.

Using computed property names [name] allows updating the correct field dynamically with the new value.

5fill in blank

hard

Fill all three blanks to lift state up and filter a list based on input in the parent.

React

function Parent() {
  const [filter, setFilter] = React.useState('');
  const items = ['apple', 'banana', 'cherry'];
  const filteredItems = items.filter(item => item.[1]([2]) [3] -1);

  return (
    <>
      <FilterInput value={filter} onChange={e => setFilter(e.target.value)} />
      <ItemList items={filteredItems} />
    </>
  );
}

function FilterInput({ value, onChange }) {
  return <input value={value} onChange={onChange} placeholder="Filter items" />;
}

function ItemList({ items }) {
  return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;
}

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

AtoLowerCase

Bfilter.toLowerCase()

C>

DindexOf

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong method name for substring search.

Not converting strings to lowercase causing case-sensitive filtering.

Using incorrect comparison operators.

The code filters items by checking if the lowercase item string contains the lowercase filter string using indexOf > -1.

Practice

1. What is the main reason to lift state up in React?
lifting state means moving state to a common parent component.

easy

A. To make components independent

B. To share state between sibling components

C. To avoid using props

D. To store state only in child components

Solution

1. Step 1: Understand lifting state concept

   Lifting state means moving state to a common parent so multiple children can access it.

2. Step 2: Identify the purpose of lifting state

   This is done to share state between sibling components and keep data in sync.

3. Final Answer:

   To share state between sibling components -> Option B

4. Quick Check:

   Lifting state = sharing state [OK]

Hint: Lifting state shares data between siblings via parent [OK]

Common Mistakes:

• Thinking lifting state makes components independent
• Believing lifting state removes props usage
• Assuming state stays only in children

2. Which of the following is the correct way to pass state and its updater function from a parent to a child component in React?

easy

A. <Child state={state} setState={setState} />

B. <Child state=setState />

C. <Child setState={state} state={setState} />

D. <Child state=setState() />

Solution

1. Step 1: Recall React props syntax

   Props are passed as name={value}. To pass state and updater, use state={state} and setState={setState}.

2. Step 2: Check each option's syntax

   <Child state={state} setState={setState} /> correctly passes both as props. Others misuse assignment or call functions incorrectly.

3. Final Answer:

   <Child state={state} setState={setState} /> -> Option A

4. Quick Check:

   Props pass state and updater correctly [OK]

Hint: Props use curly braces for variables [OK]

Common Mistakes:

• Passing functions without curly braces
• Calling updater functions instead of passing them
• Swapping state and updater names

3. Given this parent component code:

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

What will happen when the Button is clicked?

medium

A. Nothing happens because count is not updated

B. The Button component will re-render but count stays the same

C. The count displayed by Display increases by 1

D. An error occurs because setCount is not passed to Button

Solution

1. Step 1: Understand state and props flow

   The Parent holds count state and passes count to Display and an onClick handler to Button.

2. Step 2: Analyze Button click effect

   Clicking Button calls setCount(count + 1), updating state and causing Parent to re-render with new count.

3. Final Answer:

   The count displayed by Display increases by 1 -> Option C

4. Quick Check:

   State update triggers re-render and display update [OK]

Hint: State update in parent re-renders children with new props [OK]

Common Mistakes:

• Thinking Button needs count prop to update
• Believing setCount must be passed to Display
• Assuming no re-render happens on state change

4. Identify the error in this code snippet where a parent tries to lift state:

function Parent() {
  const [value, setValue] = React.useState('');
  return <Child value={value} setValue={value} />;
}

medium

A. setValue prop is incorrectly assigned the state value instead of the updater function

B. value state is not initialized properly

C. Child component is missing parentheses

D. React.useState should be React.state

Solution

1. Step 1: Check props passed to Child

   Parent passes value={value} correctly but setValue={value} incorrectly passes the state value instead of the updater function.

2. Step 2: Understand correct usage

   setValue should be passed as setValue={setValue} to allow Child to update state.

3. Final Answer:

   setValue prop is incorrectly assigned the state value instead of the updater function -> Option A

4. Quick Check:

   Updater function must be passed, not state value [OK]

Hint: Pass updater function, not state value, as setState prop [OK]

Common Mistakes:

• Confusing state variable with updater function
• Forgetting curly braces around variables
• Assuming React.useState is incorrect

5. You have two sibling components, InputA and InputB, both need to update and display the same text value. Which pattern correctly lifts state to their parent to keep them in sync?

hard

A. Use local variables in siblings without state

B. Store text state separately in each sibling, update independently

C. Store text state in one sibling and pass it down to the other sibling

D. Store text state in parent, pass text and setText to both siblings as props

Solution

1. Step 1: Understand shared state need

   Both siblings must show and update the same text, so state must be shared.

2. Step 2: Apply lifting state pattern

   Lift text state to their common parent and pass text and setText as props to both siblings.

3. Step 3: Evaluate other options

   Storing state separately or in one sibling breaks sync; local variables don't persist or trigger re-renders.

4. Final Answer:

   Store text state in parent, pass text and setText to both siblings as props -> Option D

5. Quick Check:

   Lift state to parent for shared updates [OK]

Hint: Lift shared state to parent, pass state and updater down [OK]

Common Mistakes:

• Keeping separate states in siblings causing out-of-sync
• Passing state only one way between siblings
• Using local variables instead of state