2 replies

server component throws error

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

This server component throws the following error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Why? i'm writing the server component and fetching data as the nextjs docs mentioned.

TTC

Theo's Typesafe Cult•4y ago•

2 replies

functionthatreturnsfalse

server component throws error

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

This server component throws the following error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Why? i'm writing the server component and fetching data as the nextjs docs mentioned.

server component throws error

Similar Threads

server component throws error

Similar Threads

Similar Threads

Similar Threads