Warning: Only plain objects can be passed to Client Components from Server Components

Answered

Elm sawfly posted this in #help-forum

Elm sawflyOP

2024-03-19T02:37:40.000Z

                <div className="flex mt-10 flex-col gap-y-6">
                    {restaurants?.map(restaurant => (
                        <RestaurantCard
                            buttonText="View Menu"
                            restaurant={restaurant}
                        />
                    ))}
                </div>

When I open this page, it logs this in the console:

Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  <... buttonText=... restaurant={{id: ..., shopAddress: ..., shopCloseTime: ..., shopImg: ..., shopName: ..., shopOpenTime: ..., user_id: ..., xata: ...}}>
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Answered by averydelusionalperson

I believe passing like this : restaurant: JSON.parse(JSON.stringify(restaurant)) should work

View full answer