submit an async form that fetches data

  Kiến thức lập trình

in NextJs I want to create a component that displays a form, and fill this form by values from database.

the problem is that client component doesn’t support aync/await and server components doesn’t support neither useFormState() nor event handlers

async function MyForm({id}){

// supported in Client components only
let [state, submitAtion] = useActionState(...);

  // await is supported in server components only
   let value = await fetch(`https://example.com/value/${id}`);

// event handler is supported in Client components only
clickHandler(ev){
 // handle the form
}

return (
 <>
  <form action={submitAtion}>
  <input value={content} onChange={...} />
  <button type="submit" />Submit</button>
  <button onClick={clickHandler}>Submit</button>
  </form>
 </>
)
}

trials:

1- using server actions, but useActionState() and useFormState() are supported in client components only

2- convert MyForm into a client component, but async/await is not supported in client components

3- move the button to a separate client component and keep the form in a server component, but the button cannot access the form data, and we cannot pass a function from MyForm into MyButton as it is not a serializable value

LEAVE A COMMENT