useReducer dispatch function wipes out my data

JavaScript
1

I’m currently learning about useReducer for react. I’m trying to make a recipe box with ingredients, measurements and amounts that you can change by typing inside the text-input boxes. But whenever I try to do the typing, the entire list disappears, and I get this error

react-dom.js:9 
        
       TypeError: Cannot read properties of undefined (reading 'ingredients')
    at App (pen.js:63:26)
    at Bi (react-dom.js:7:19481)
    at ei (react-dom.js:9:3150)
    at oa (react-dom.js:9:44778)
    at la (react-dom.js:9:39715)
    at pf (react-dom.js:9:39646)
    at Ir (react-dom.js:9:39506)
    at so (react-dom.js:9:36651)
    at on (react-dom.js:7:3250)
    at Gi (react-dom.js:9:36960)

Each recipe seems to return “undefined” when I try to change any of the texts. I don’t understand why the recipe parameter works before I type and not afterwards

This is the link to my code https://codepen.io/bl1xvan/pen/eYKmNbm?editors=0010

2

You are returning an array of nested arrays. The outer map should be returning an object with the ingredients key set to the result of the inner map.

Edit: just to be clear, with ...recipe added to the object as well.

3

So basically like this?

       return {
          ...recipe,
          ingredients: recipe.ingredients.map((ingredient) => {
            if (ingredient.id === action.id) {
              return {
                ...ingredient,
                [action.payload.name]: action.payload.value
              };
            } else {
              return ingredient;
            }
          })
4

Did you try it? I think it looks about right.

5

Yes. It worked. I did also need to change the id parameter in the handleChange function.

But now it’s working! Thank you!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.