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.