Server-side state passing in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a server component that receives props.

NextJS

export default function Page({ [1] }) {
  return <h1>{message}</h1>;
}

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

Adata

Bprops

Cstate

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props' without destructuring causes undefined variable error.

Using 'state' or 'data' which are not passed as props.

The component receives message as a prop and uses it inside JSX.

2fill in blank

medium

Complete the code to fetch data on the server and pass it as props.

NextJS

export default async function Page() {
  const data = await fetch('/api/data').then(res => res.json());
  return <h1>{data.[1]</h1>;
}

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

Atext

Btitle

Cmessage

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong property name causes undefined to show.

Trying to access data without awaiting fetch.

The fetched JSON has a message property used in JSX.

3fill in blank

hard

Fix the error in passing server data to a client component.

NextJS

import ClientComponent from './ClientComponent';

export default async function Page() {
  const data = await fetch('/api/data').then(res => res.json());
  return <ClientComponent [1] />;
}

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

Adata={data}

Bprops=data

Cdata:data

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props without key causes syntax errors.

Using colon instead of equal sign in JSX.

Props must be passed as data={data} to the client component.

4fill in blank

hard

Fill both blanks to create a server component that fetches data and passes it to a client component.

NextJS

import ClientComponent from './ClientComponent';

export default async function Page() {
  const [1] = await fetch('/api/info').then(res => res.json());
  return <ClientComponent [2]=[1] />;
}

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

Ainfo

Bdata

DinfoData

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for variable and prop without mapping.

Forgetting to await fetch causes errors.

The variable info holds fetched data and is passed as prop info.

5fill in blank

hard

Fill all three blanks to pass server data as props and render it in a client component.

NextJS

import ClientComponent from './ClientComponent';

export default async function Page() {
  const [1] = await fetch('/api/user').then(res => res.json());
  return <ClientComponent [2]=[1] [3]="active" />;
}

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

Auser

Cstatus

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up variable and prop names.

Using curly braces for string literals.

The fetched data is stored in user, passed as prop user, and a string prop status is set to "active".