Error: Objects are not valid as a React child (found: [object Promise])....
Answered
American Sable posted this in #help-forum
American SableOP
So this is the error im getting:
This is the code where i think the error is occurring?
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.This is the code where i think the error is occurring?
'use client'
import { usePathname } from 'next/navigation'
import { Client, WaterworksId } from '@/client'
import CardsGroup from '@/components/catalogue/cards-group'
import MarketHeading from '@/components/catalogue/market-heading'
import { CardData } from '@/components/catalogue/cards-group/card'
export default async function Home() {
const path = usePathname()
const market = await Client.getMarket(WaterworksId)
const cards: CardData[] = market.categories.map((x) => ({
name: x.name,
thumbnail: x.thumbnail,
url: `${path}/${x.id}`
}))
return (
<main>
<MarketHeading market={market} />
<CardsGroup cards={cards} />
</main>
)
}14 Replies
The error is either inside MarketHeading or CardsGroup. The issue is that youre trying to log an object, but this is not allowed and you need to select the property you want to display.
For example
const obj = {
name: "eirik"
id: 4
}
<h1>{obj}</h1> will not work because it is an object with multiple properties.
<h1>{obj.name}</h1> will work because it is only a string.
For example
const obj = {
name: "eirik"
id: 4
}
<h1>{obj}</h1> will not work because it is an object with multiple properties.
<h1>{obj.name}</h1> will work because it is only a string.
American SableOP
hmmm
but im not doing that tho
@joulev Client components cannot be async
American SableOP
it was this, sad
is there any way i can do that?
Since client components cannot be async you can’t make it async
American SableOP
No i meant the use of pathname
i just want the href to be "actual_path/id"
@American Sable i just want the href to be "actual_path/id"
Just use the params prop in the page server component to construct the pathname
Do the data fetching in a server component - then if you need any interactivity, pass the data as props to client components
American SableOP
okay
thanks