User context in components in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does user context propagate in nested Astro components?

Consider an Astro component tree where a parent component sets a user context. How does this context behave in nested child components?

Astro

<!-- Parent.astro -->
---
import Child from './Child.astro';
const user = { name: 'Alice' };
Astro.provideContext('user', user);
---
<div>
  <Child />
</div>

<!-- Child.astro -->
---
const user = Astro.useContext('user');
---
<p>User: {user?.name}</p>

A The child component receives the user context and displays 'User: Alice'.

B The child component cannot access the user context and displays 'User: undefined'.

C The user context is only available in the parent and causes a runtime error in the child.

D The child component receives a copy of the user context but with all properties undefined.

💡 Hint

Think about how Astro's provideContext and useContext work for passing data down the component tree.

Astro's provideContext passes data down to nested components. The child component uses useContext to access the same user object, so it can display the user's name.

❓ state_output

intermediate

What is the output when user context changes in Astro components?

Given a parent Astro component that updates user context dynamically, what will the child component display after the update?

Astro

<!-- Parent.astro -->
---
import Child from './Child.astro';
let user = { name: 'Bob' };
Astro.provideContext('user', user);
user.name = 'Charlie';
---
<div>
  <Child />
</div>

<!-- Child.astro -->
---
const user = Astro.useContext('user');
---
<p>User: {user.name}</p>

A Runtime error due to context mutation

B User: Charlie

C User: undefined

D User: Bob

💡 Hint

Consider if Astro context is reactive or just a reference to the object.

Astro context passes the object reference. Changing the object's property updates the value seen by child components, so the child shows 'Charlie'.

📝 Syntax

advanced

Which option correctly uses Astro context to pass user data?

Identify the option that correctly sets and accesses user context in Astro components without syntax errors.

A

<!-- Parent.astro -->
---
Astro.provideContext('user', {name: 'Dana'});
---
<Child />

<!-- Child.astro -->
---
const user = Astro.useContext('user');
---
<p>{user?.name}</p>

B

<!-- Parent.astro -->
---
Astro.provideContext('user', {name: 'Dana'});
---
<Child />

<!-- Child.astro -->
---
const user = Astro.useContext('user')
---
<p>{user.name}</p>

C

<!-- Parent.astro -->
---
Astro.provideContext('user', {name: 'Dana'})
---
<Child />

<!-- Child.astro -->
---
const user = Astro.useContext('user')
---
<p>{user.name}</p>

D

<!-- Parent.astro -->
---
Astro.provideContext('user', {name: 'Dana'});
---
<Child />

<!-- Child.astro -->
---
const user = Astro.useContext('user');
---
<p>{user.name}</p>

💡 Hint

Check for missing semicolons and safe access to properties.

Option A correctly uses semicolons and safe optional chaining user?.name to avoid errors if context is missing.

🔧 Debug

advanced

Why does this Astro child component fail to access user context?

Given the code below, why does the child component display 'User: undefined'?

Astro

<!-- Parent.astro -->
---
import Child from './Child.astro';
const user = { name: 'Eve' };
---
<div>
  <Child />
</div>

<!-- Child.astro -->
---
const user = Astro.useContext('user');
---
<p>User: {user?.name}</p>

A Astro.useContext must be called inside the parent, not the child.

B The child component uses the wrong context key 'user' instead of 'User'.

C The parent component never called Astro.provideContext to set 'user'.

D The user object is not reactive, so the child sees undefined.

💡 Hint

Check if the parent component actually provides the context key used by the child.

The parent component did not call Astro.provideContext('user', user), so the child cannot find the 'user' context and gets undefined.

🧠 Conceptual

expert

What happens if multiple Astro components provide the same user context key?

In an Astro app, if a parent and a nested child component both call Astro.provideContext('user', ...) with different values, what will a grandchild component receive when calling Astro.useContext('user')?

A Astro throws a runtime error due to duplicate context keys.

B The grandchild receives a merged object combining both parent and child 'user' contexts.

C The grandchild receives the original parent's 'user' context, ignoring the child's override.

D The grandchild receives the nearest (closest ancestor) 'user' context value, shadowing the parent's value.

💡 Hint

Think about how context scopes work in component trees.

Astro context works like scopes: the closest provider for a context key shadows any outer providers. So the grandchild gets the child's 'user' context value.

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