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. Why? i'm writing the server component and fetching data as the nextjs docs mentioned.
1 Reply
functionthatreturnsfalse
I forgot to delete the 'use client' directive in the parent component, my bad. !close
Want results from more Discord servers?
Add your server