Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

68
Vistas
How to solve undefined error when trying to access a nested array in a React state variable?

I am trying to build a form in which you can dynamically add fields and subfields. As an example, my form looks like this:

    Store information:
      Name
      Items inventory: [] (this is the nested array part,
            you press a button and can add another item to the inventory)
            ***Buttons to add more items to this store***

      ***Buttons to add more stores***
    

The code I am using to achieve this looks like this. I have updated to reflect the answers that I got so far and also the proper syntax for (there was an issue with the closing tags)

function StoreForm() {
  const [storeInputs, setStoreInputs] = useState([
    { storeName: "", items: [{ itemName: "" }] },
  ]);
   ///...
    
    return (
        {storeInputs.map((store,index) => 
        {
            //input data here
            
            {store.items.map((item,i) => 
                    {
                    //This is where it throws the undefined error
                    //do something
                    }
                )
            }
         }
        )
    )
   
}

The above code now works on the first run, but when I try to add another store to the form, it throws the undefined error again. Here is the code I am using for the buttons that add another store:

  const handleRemoveStore = (index) => {
    const list = [...storeInputs];
    list.splice(index, 1);
    setItemsInputs(list);
  };

  const handleAddStore = () => {
    setItemsInputs([...storeInputs, { storeName: "", items: [{ itemName: "" }] }]);
  };

Thank you for the answers thus far!

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

On

return (
        {storeInputs.map(store,index) => 
        {
            //input data here
            
            {storeInputs.items.map(item,i) => 
                {
                    //This is where it throws the undefined error
                    //do something
                }
            }
        }
    )

You map two time on storeInputs, you need to do someting like :

return (
        {storeInputs.map((input,index) => 
    {
        //input data here
        
        {input.items.map((item,i) => 
            {
                //This is where it throws the undefined error
                //do something
            }
        }
    }
)

Be careful about the () around the params, you do :

x.map(a, index) => {})

In fact is :

x.map((a, index) => {})

The first ( is for the map methods, second is for the params of the function inside your map.

7 months ago · Juan Pablo Isaza Denunciar

0

The storeInputs state hasn't any items property to map in the inner mapping. That property belongs to the store object mapped from the outer loop.

function StoreForm() {
  const [storeInputs, setStoreInputs] = useState([
    { storeName: "", items: [{ itemName: "" }] },
  ]);
  
  ...
    
  return storeInputs.map((storeInput, index) => {
    // input data here
  
    return (
      ...          
      {storeInput.items.map((item, i) => { ... })}
      ...
    );
  });
}
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos