Estoy tratando de crear un formulario en el que pueda agregar dinámicamente campos y subcampos. Como ejemplo, mi formulario se ve así:
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***El código que estoy usando para lograr esto se ve así. Actualicé para reflejar las respuestas que obtuve hasta ahora y también la sintaxis adecuada para (hubo un problema con las etiquetas de cierre)
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 } ) } } ) ) }El código anterior ahora funciona en la primera ejecución, pero cuando intento agregar otra tienda al formulario, arroja el error indefinido nuevamente. Aquí está el código que estoy usando para los botones que agregan otra tienda:
const handleRemoveStore = (index) => { const list = [...storeInputs]; list.splice(index, 1); setItemsInputs(list); }; const handleAddStore = () => { setItemsInputs([...storeInputs, { storeName: "", items: [{ itemName: "" }] }]); };¡Gracias por las respuestas hasta ahora!
En
return ( {storeInputs.map(store,index) => { //input data here {storeInputs.items.map(item,i) => { //This is where it throws the undefined error //do something } } } )Asigna dos veces en storeInputs, debe hacer algo como:
return ( {storeInputs.map((input,index) => { //input data here {input.items.map((item,i) => { //This is where it throws the undefined error //do something } } } )Tenga cuidado con el () alrededor de los parámetros, lo hace:
x.map(a, index) => {})De hecho es:
x.map((a, index) => {})El primero (es para los métodos del mapa, el segundo es para los parámetros de la función dentro de su mapa.
El estado storeInputs no tiene ninguna propiedad de items para asignar en el mapeo interno. Esa propiedad pertenece al objeto de store asignado desde el bucle externo.
function StoreForm() { const [storeInputs, setStoreInputs] = useState([ { storeName: "", items: [{ itemName: "" }] }, ]); ... return storeInputs.map((storeInput, index) => { // input data here return ( ... {storeInput.items.map((item, i) => { ... })} ... ); }); }