useReducer dispatch function wipes out my data

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

       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

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.

So basically like this?

       return {
          ingredients: => {
            if ( === {
              return {
                []: action.payload.value
            } else {
              return ingredient;

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

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

But now it’s working! Thank you!

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