Passing props to server children | Next.js | Page 1

barren garnet Oct 17, 2023, 5:40 PM

#

So my page is structured like this:

import ServerComponent from './server-component'
 

export default async function Page() {
  const projects = await getProjects()
  return (
  <div>
    {projects.map((project, index) => {
    return (<ClientComponent>
        <ServerComponent project=  {projects[index]} />
      </ClientComponent>
      )}
    }
  </div>
    )
}```
I get an error for passing props to the nested ServerComponent for some reason I don't understand.

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  [function, function]
   ^^^^^^^^
    at stringify (<anonymous>) 

I could really need some help with this. Thanks

spring moonBOT Oct 17, 2023, 5:40 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

lapis quest Oct 17, 2023, 5:44 PM

#

2 things:

Seems like a project is some kind of function
Why do you use ‘projects[index]’?

barren garnet Oct 17, 2023, 5:45 PM

#

Sorry, projects is data I get from a CMS. It's just an array of objects with data inside like {title, photo, description} etc.

lapis quest Oct 18, 2023, 4:56 AM

#

What does server component render?

lament fjord Oct 18, 2023, 5:05 AM

#

barren garnet So my page is structured like this: ```import ClientComponent from './client-com...

What is <ServerComponent> ? seems like you passed something to client component where you shouldnt

barren garnet Oct 18, 2023, 1:10 PM

#

The ServerComponent renders an Image or a PortableText from the project prop I pass to it. They are just slides
The ClientComponent has the logic to animate those slides on click, touch or wheel events.
My goal was to wrap the project slides and keep them as RSC while wrapping them as children to a ClientComponent which you can think of as a kind of Carousel.

#Passing props to server children