Functions cannot be passed directly to client components (FIXED)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Solution
#webdevelopment #coding #programming

[@nelsonfrank]

Thanks. Helpfully video

[@dickimaulanayusuf616]

Hi, nice video! I have a question. What happens when a page that is strictly for the server attempts to import a client component? Then, the page (server component) passes the function to the client. 🤔

[@dallindavis2131]

Good video, but you gave a solution and then said "this isn't a very good solution." What is a good solution?

[@AnkitYadav-ty4up]

Yes please do let us know the good solution

[@brunovaz]

apparently is to not use app router. This shit's not ready lol

[@haseebiqbal4140]

i want to do something like this {children} . anything inside this tag should be rendered on client, but it still renders on server here is my implementation ``` 'use client'; import React, { PropsWithChildren, useEffect } from 'react'; function ClientOnly({ children }: PropsWithChildren) { useEffect(() => { console.log('CLIENT'); }, []); return children; } export default ClientOnly; ```