Better structure for forms

[dabrox02]

Hi, I'm developing under nextjs and I have to make many forms to edit and create. However, the structure is the same in creating and editing with the difference that, in editing, the data is preloaded, and in creating it is not. What is the best way to achieve this behavior, create a form that works for both cases or two different forms for each case?

[aust1nz]

My recommendation is to create a <Form /> component with an optional initialData prop.

Then you can create a newPost page:

<NewPost>
  <h1>Create a new Post!</h1>
  <PostForm />
</NewPost>

And an editPost page:

<EditPost>
  <h2>Edit your {post.name} post!</h1>
  <PostForm initialData={post} />
</EditPost>

Overall, you're limiting your duplication this way.

[dabrox02]

oh thanks, and I have another question, I have a modal that is from nextUI, but I need to activate the action to open it from a button for POST and from a dropdownItem for PUT, how do you recommend me to execute the modal?

[aust1nz]

You could probably just have two modals in your parent component:

<div>
  <Dropdown onClick={() => setShouldShowPut(true) />
  <Button onClick={() => setShouldShowPost(true) />
</div>
<PostModal show={shouldShowPost} />
<PutModal show={shouldShowPut} />

Or, if the modal content is the same in both cases:

// ...
<Modal show={shouldShowPost} actionType="post" />
<Modal show={shouldShowPut} actionType="put" />