Next.js Discord

Discord Forum

help me solving error

Unanswered
Burmese posted this in #help-forum
Open in Discord
BurmeseOP
hey developers !!!

i dont know why but i am getting this error
my code is


"use client"
import { UploadDropzone } from "@/lib/uploadthing"
import '@uploadthing/react/styles.css'
interface FileUploadProps {
onChange: (url?:string)=> void
value: string
endpoint: "messageFile" | "serverImage"
}

export const FileUpload=({
onChange,
value,
endpoint,

}: FileUploadProps)=>{
return(
<div>
<UploadDropzone
endpoint={endpoint}
onClientUploadComplete={(res)=>{
onChange(res?.[0].fileUrl)
}}
onUploadError={(error: Error)=>{
console.log(error);

}}

/>
</div>
)
}
please check if u could help me with this

7 Replies

B33fb0n3
you are passing the function "onChange" to a client component. To pass functions from server to client is only possible with server functions. So remove the onChange Method and you are good to go or change it to a server function
Stoyan Paskalev
You can pass a function from server to a client component, but the function in the server component must be with "use server" in the beginning 

  export const ServerComponent = () => {
    const someFunction = async (someProp: any) => {
      "use server"
      ...
    };

  return (
    <>
      <ClientComponent someFunction={someFunction} />  
    </>
  )
}

// In a different file

"use client"
export const clientComponent = (props) => {
   const { someFunction } = props;

   const invokeServerFunction = () => {
      someFunction(prop)
   }
  
  return (
    <>
      <button onClick={() => invokeServerFunction}></button>
    </>
  )
}
This is by using the serverActions --> you need to mark the function as async
@Burmese
B33fb0n3
@Burmese ?