Shared state across layouts in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React context for shared state.

NextJS

import React from 'react';

export const SharedStateContext = React.[1]();

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

AuseEffect

BuseState

CuseContext

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Confusing useContext with createContext

React's createContext is used to create a context object for sharing state.

2fill in blank

medium

Complete the code to provide the shared state context in a layout component.

NextJS

import { SharedStateContext } from './SharedStateContext';
import { useState } from 'react';

export default function RootLayout({ children }) {
  const [count, setCount] = useState(0);

  return (
    <SharedStateContext.Provider value={{ count, setCount }}>
      [1]
    </SharedStateContext.Provider>
  );
}

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

Achildren

B<children />

CRootLayout

D<RootLayout />

Attempts:

3 left

💡 Hint

Common Mistakes

Wrapping children in JSX tags like <children />

Trying to render the layout component inside itself

The children prop represents nested content inside the layout and should be rendered directly.

3fill in blank

hard

Fix the error in this component that consumes the shared state context.

NextJS

import { useContext } from 'react';
import { SharedStateContext } from './SharedStateContext';

export default function Counter() {
  const { count, setCount } = useContext([1]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

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

ASharedStateContext

BuseState

CReact

DSharedStateProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Passing useState or a component instead of the context object

Forgetting to import the context

To consume context, you pass the context object created by createContext to useContext.

4fill in blank

hard

Fill both blanks to create a shared state hook that can be used in any layout or page.

NextJS

import { useContext } from 'react';
import { SharedStateContext } from './SharedStateContext';

export function useSharedState() {
  return useContext([1]);
}

// Usage in a component:
// const { count, setCount } = useSharedState();

export default function SomeComponent() {
  const { count, setCount } = useSharedState();

  return <button onClick={() => setCount(count [2] 1)}>Increment</button>;
}

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

ASharedStateContext

B+

C-

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of the context in the hook

Using minus instead of plus for increment

The hook uses useContext with the shared context, and the increment uses the plus operator.

5fill in blank

hard

Fill all three blanks to create a shared state provider component that wraps children and initializes count to zero.

NextJS

import React, { useState } from 'react';
import { SharedStateContext } from './SharedStateContext';

export function SharedStateProvider({ [1] }) {
  const [count, [2]] = useState([3]);

  return (
    <SharedStateContext.Provider value={{ count, setCount }}>
      {children}
    </SharedStateContext.Provider>
  );
}

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

Achildren

BsetCount

C0

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'count' instead of 'setCount' as the setter

Forgetting to destructure children from props

Initializing count with a non-numeric value

The provider receives children as props, uses setCount from useState, and initializes count to zero.