Next.js Discord

Discord Forum

Using useState inside of an async component

Unanswered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
I have a form that has a state which tracks all the fields of the form. The form also has a select element that needs to first get some data from a DB. I would like to fetch it like this
  const categories = await prismadb.category.findMany()

But this is only possible inside of an async component. But if the component is async, i cant use the useState hook. How do i go around this ?

4 Replies

Ray
pass it from server component
Giant ChinchillaOP
@Ray You mean like this? 
page.tsx
import AddItemForm from "./components/AddItemForm";

const AddItemPage = () => {
  /// Fetch here instead of inside the <AddItemForm/> ?
  return (
    <div>
      <AddItemForm items={fetchedItems} />
    </div>
  );
};

export default AddItemPage;
Ray
yes
@Ray yes
Giant ChinchillaOP
Makes sense, thanks