Sharing state between components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable using React hooks.

React

const [count, setCount] = [1](0);

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

AuseEffect

BuseState

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState to create state.

Trying to use useContext without creating a context first.

The useState hook creates a state variable and a function to update it.

2fill in blank

medium

Complete the code to pass state as a prop from a parent to a child component.

React

<ChildComponent [1]={count} />

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

Adata

Bvalue

Cstate

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic prop name like 'value' when the child expects 'count'.

Forgetting to pass the state as a prop.

Props are named attributes. Here, the prop name is count to pass the state value.

3fill in blank

hard

Fix the error in the child component to correctly receive props.

React

function ChildComponent([1]) {
  return <p>{count}</p>;
}

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

A{count}

Bprops

Ccount

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using props which would require props.count inside the component.

Using curly braces inside the function parameter incorrectly.

To correctly access the count prop in the child component, destructure it from the props object using ({count}) in the function parameters.

4fill in blank

hard

Fill both blanks to create a context and provide it to child components.

React

const MyContext = React.[1]();

function App() {
  const [value, setValue] = React.useState(0);
  return (
    <MyContext.[2] value={{ count: value }}>
      <ChildComponent />
    </MyContext.[2]>
  );
}

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

AcreateContext

BuseContext

CProvider

DConsumer

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext to create the context.

Using Consumer instead of Provider to supply the value.

createContext creates a context object. The Provider component supplies the context value to children.

5fill in blank

hard

Fill all three blanks to consume context value inside a child component.

React

function ChildComponent() {
  const value = React.[1](MyContext);
  return <p>Value: {value.[2]</p>;
}

// Context value is an object like { count: 5 }

// Access the count property with [3]

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

AuseContext

Bcount

Cvalue.count

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use useState or other hooks instead of useContext.

Accessing the whole value object instead of a specific property.

useContext hook reads the context value. The value is an object, so access the count property to display it.