0

In my client component I want to create a new Todo:

"use client";
const ClientComp:FC<{ createTodo: (title:string) => void }> = ({ createTodo }) => {
  return (
    <button onClick={() => createTodo("First Todo")}>ADD TODO</button>
  )
}

Now in my server component, I would like to actually insert a new row in the db when this button is clicked:

const ServerComp:FC<{}> = () => {
  const createTodo = async (title:string) => {
    "use server";
    const { error } = await supabase.from("todos")
      .insert([{ id: user.id, title }]);
    return error
  }

  return (
    <ClientComp createTodo={createTodo} />
  )
}

But I get an error log in the server console saying: Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". [..., function] ^^^^^^^^ at stringify (<anonymous>)

What am I doing wrong here?

Sventies
  • 2,314
  • 1
  • 28
  • 44
  • This is weird, your code looks fine. Sounds naive, but have you tried to restart the app, clean .next cache and etc? Also install latest version of React and Next. – Danila Jul 11 '23 at 10:13

1 Answers1

0

You can not pass server action to client components as props and expect them to work fine. It can be fixed by extracting server action to separate file with 'use server' note and importing them directly into client component.

Yegor Kuzmin
  • 1