Upload data of nested form does not work after spreading up components

[gwittm]

We created a form to add new recipes to our database. Within the form we use another form to add ingredients, that are shown in a list before submitting the form.
We had these two forms in one component. In this state all data were sent to the database. After spreading up the components (FormularAddRecipe and FormularAddIngredients) the ingredients are still displayed at the form but not sent to our database after submitting the form. Could you please help us with this issue...

[NikRoe]

Hi there,

in your RecipeForm you are currently calling the handleSubmit function twice.
For the form within this component and also for the form you call in this component (FormularIngredients).

The reason behind this is most likely that your ingredients state is part of the FormularIngredients component but you want to send the data, including the ingredients, whenever the RecipeForm form is submitted.

I would start by moving the ingredients state up to the RecipeForm.

export default function RecipeForm({ onSubmit, formName, defaultData }) {
const [ingredients, setIngredients] = useState([]);
//...
}

I would also move the part of the code where you map over the ingredients to the RecipeForm. (By doing this, you don't need to pass the ingredients state as a prop back to the FormularIngredients component.)

Displaying the ingredients is by the way also something you could make a component out of.

//...
<FormularIngredients onSubmit={handleSubmit} />
      <StyledIngredientsSection>
        <p>added Ingredients:</p>
        <ul>
          {ingredients.map((ingredient) => {
            return (
              <li key={ingredient.name}>
                {ingredient.name}
                {ingredient.amount}
                {ingredient.unit}
              </li>
            );
          })}
        </ul>
      </StyledIngredientsSection>

For your FormularIngredients to be able to communicate the ingredients to the RecipeForm, you will need a separate function to handle the submit of that form.

Like this:

 function handleAddIngredient(newIngredient) {
    setIngredients([...ingredients, newIngredient]);
  }

And pass this to your FormularIngredients.

//...
<FormularIngredients onAddIngredient={handleAddIngredient} />
//...

Within that component, you need to accept this prop and call the onAddIngredient function whenever FormularIngredients form is submitted:

//...
<form
        onSubmit={(event) => {
          event.preventDefault();
          onAddIngredient({
            /*  ingredientId: nanoid(), */
            name: event.target.elements.ingredient.value,
            amount: event.target.elements.amount.value,
            unit: event.target.elements.unit.value,
          });
        }}
      >
..//

you might need the nanoid again, as we talked about this morning in the daily, so I left the comment untouched.

Now only one thing is left to do: Update the handleSubmit in your RecipeForm to also send the ingredients:

 function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    onSubmit({ ...data, ingredients });
  }

Hope this already helps 🤞