User context in components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the user context in an Astro component.

Astro

import { [1] } from 'astro:context';

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

AloadUser

BuseUser

CfetchUser

DgetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getUser' or 'fetchUser' which are not valid Astro context functions.

Trying to import from wrong modules.

The useUser function is the correct way to access user context in Astro components.

2fill in blank

medium

Complete the code to retrieve the current user inside the component.

Astro

const user = [1]();

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

AgetUser

BloadUser

CfetchUser

DuseUser

Attempts:

3 left

💡 Hint

Common Mistakes

Calling functions that are not imported or do not exist.

Trying to access user context without calling the correct function.

Calling useUser() returns the current user context inside the component.

3fill in blank

hard

Fix the error in the code to correctly display the user's name.

Astro

<p>Hello, [1]. Welcome back!</p>

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

AuserName

Buser['name']

Cuser.name

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names like 'userName' or 'username'.

Using bracket notation unnecessarily.

The user object has a name property accessed with dot notation: user.name.

4fill in blank

hard

Fill both blanks to create a conditional rendering that shows the user's email if logged in.

Astro

{user [1] null && <p>Email: [2]</p>}

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

A!==

B==

Cuser.email

Duser.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' instead of '!==' causing wrong conditional logic.

Displaying the wrong user property.

The condition user !== null checks if the user exists, then displays user.email.

5fill in blank

hard

Fill all three blanks to destructure user properties and display them.

Astro

const { [1], [2] } = user;
<p>Name: [3]</p>

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

Aemail

Bname

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'username' which is not a property of user.

Mixing up destructured variables and display variables.

Destructure email and name from user, then display name.

Practice

1. What is the main purpose of using createContext in Astro components?

easy

A. To share user data easily across multiple components

B. To create a new component

C. To style components with CSS

D. To fetch data from an API

Solution

1. Step 1: Understand what createContext does

   createContext creates a shared space to hold data accessible by many components.

2. Step 2: Identify the purpose related to user data

   It is used to share user information easily without passing props manually through every component.

3. Final Answer:

   To share user data easily across multiple components -> Option A

4. Quick Check:

   User context shares data = A [OK]

Hint: Remember: createContext sets shared data space [OK]

Common Mistakes:

• Thinking createContext creates components
• Confusing context with styling or API calls
• Assuming it fetches data automatically

2. Which of the following is the correct way to read user context inside an Astro component?

easy

A. const user = useState(UserContext);

B. const user = useContext(UserContext);

C. const user = Provider(UserContext);

D. const user = createContext(UserContext);

Solution

1. Step 1: Identify the function to read context

   useContext is the hook used to access context data inside components.

2. Step 2: Check the syntax correctness

   The correct syntax is const user = useContext(UserContext); to get the user data.

3. Final Answer:

   const user = useContext(UserContext); -> Option B

4. Quick Check:

   Reading context uses useContext = D [OK]

Hint: Use useContext to read context data inside components [OK]

Common Mistakes:

• Using createContext to read data
• Confusing Provider with reading context
• Using useState instead of useContext

3. Given this Astro component code snippet:

const UserContext = createContext();

function UserProfile() {
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

function App() {
  return (
    <UserContext.Provider value={{ name: 'Alice' }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

What will be rendered on the page?

medium

A. Error: useContext called outside Provider

B. Hello, undefined!

C. Hello, user!

D. Hello, Alice!

Solution

1. Step 1: Check the Provider value

   The UserContext.Provider wraps UserProfile and provides { name: 'Alice' } as context.

2. Step 2: Check how UserProfile uses context

   UserProfile reads the context with useContext(UserContext) and accesses user.name.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   Provider value passed correctly = C [OK]

Hint: Provider value sets user data; useContext reads it [OK]

Common Mistakes:

• Forgetting to wrap component in Provider
• Expecting error when Provider is present
• Using wrong property name for user

4. Identify the error in this Astro component code:

const UserContext = createContext();

function UserProfile() {
  const user = useContext(UserContext);
  return <div>Welcome, {user.name}!</div>;
}

function App() {
  return (
    <UserProfile />
  );
}

What is the problem?

medium

A. useContext is used incorrectly; should be useState

B. UserContext is not created properly

C. UserProfile is not wrapped in UserContext.Provider, so context is undefined

D. UserProfile should not return JSX

Solution

1. Step 1: Check if Provider wraps UserProfile

   The UserProfile component uses useContext(UserContext) but is not inside a UserContext.Provider.

2. Step 2: Understand the effect of missing Provider

   Without the Provider, the context value is undefined, so user.name will cause an error or be undefined.

3. Final Answer:

   UserProfile is not wrapped in UserContext.Provider, so context is undefined -> Option C

4. Quick Check:

   Missing Provider causes undefined context = B [OK]

Hint: Always wrap consumers in Provider to avoid undefined context [OK]

Common Mistakes:

• Assuming useContext works without Provider
• Confusing useContext with useState
• Thinking JSX return is invalid

5. You want to create a user context that provides both name and role to nested components. Which code correctly sets up the context and accesses both values inside a child component?

hard

A. const UserContext = createContext();

function UserProvider({ children }) {
return (
<UserContext.Provider value={{ name: 'Bob', role: 'admin' }}>
{children}
</UserContext.Provider>
);
}

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

B. const UserContext = createContext({ name: 'Bob', role: 'admin' });

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

C. const UserContext = createContext();

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

function UserProvider() {
return <UserContext.Provider value={{ name: 'Bob' }} />;
}

D. const UserContext = createContext();

function UserProvider({ children }) {
return (
<UserContext.Provider value={{ name: 'Bob' }}>
{children}
</UserContext.Provider>
);
}

function Dashboard() {
const user = useContext(UserContext);
return <div>User: {user.name}, Role: {user.role}</div>;
}

Solution

1. Step 1: Check Provider sets both name and role

   const UserContext = createContext();
   
   function UserProvider({ children }) {
     return (
       <UserContext.Provider value={{ name: 'Bob', role: 'admin' }}>
         {children}
       </UserContext.Provider>
     );
   }
   
   function Dashboard() {
     const user = useContext(UserContext);
     return <div>User: {user.name}, Role: {user.role}</div>;
   }

   's UserProvider passes { name: 'Bob', role: 'admin' } as value, providing both properties.

2. Step 2: Verify Dashboard reads both values

   Dashboard uses useContext(UserContext) and accesses user.name and user.role correctly.

3. Final Answer:

   correctly sets up the context and accesses both name and role -> Option A

4. Quick Check:

   Provider value includes all needed fields = A [OK]

Hint: Provider value must include all user info needed by children [OK]

Common Mistakes:

• Setting default context but not wrapping Provider
• Provider missing role property
• Provider not wrapping children properly