Upload to Database does not work correctly🤯

[gwittm]

Hi@All 👋🏼
We created a formular for adding new recipes. Within our form we can add ingredients and by submitting the form all information should be pushed to our database. The Recipe with its title, course, time... is shown correctly at our main page and also at our database, but the ingredients (Array with name, amount and unit) can not be pushed to our database.
We successfully logged our ingredients after adding them in our formular. But creating the recipe included ingredients does not work. We would be happy for some help with this issue!

https://github.com/gwittm/Digital-Recipe-Book/tree/US3-FormularIngredients-Gabi

[doemser]

Here is how I found the problem:

1. I went to pages/api/recipes/index.js and added a console.log to your POST method like this:

if (request.method === "POST") {
    const recipes = request.body;
    console.log("RECIPES", recipes);
...

2. After submitting a recipe and inspecting the log I recognized that the data I received had no ingredients included and was not how I expected it.

3. I went to components/RecipeForm.js and found that the ingredients are not passed to the onSubmit function

export default function RecipeForm({ onSubmit, formName, defaultData }) {
  function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    onSubmit(data);
  }

  const [ingredients, setIngredients] = useState([]);
  ...

4. I changed the order of the useState and the handleSubmit function and also passed the ingredients to the onSubmit function in creating a new Object, spreading data into it and also adding ingredients like so:

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

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

5. Now the console.log was showing what I was expecting, but the UI broke with this error:

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {id, name, amount, unit, _id}). If you meant to render a collection of children, use an array instead.

6. So I went to pages/index.jsand recognized that you were trying to render an object, instead of addressing title etc. in it:

{data.map((recipe, _id) => {
          return (
            <ListItem key={recipe._id}>
              {recipe.title}
              {recipe.ingredients.map((ingredient, index) => (
                 // ingredient is an object
                <div key={index}>{ingredient}</div>
              ))}
            </ListItem>
          );
        })}

with addressed key:

 <div key={ingredient.id}>{ingredient.name}</div>

Thats it! Hope that helps :)