Tengo un formulario con diferentes entradas que llena el siguiente estado definido como
const [userTaxData, setUserTaxData] = React.useState({ businessName: "", rfc: "", address: { street: "", number: 0, suburb: "", city: "", state: "", country: "", zcode: 0 } });y la función handleChange definida como
const handleChange = (e) => { setUserTaxData({ ...userTaxData, [e.target.name]: e.target.value }); };Pero el problema que he enfrentado es que cuando trato de cambiar la propiedad "zcode" no funciona y es porque está dentro del objeto "dirección", por lo que necesito su apoyo porque no sé cómo acceder a Propiedades de "dirección".
Una forma simple de hacerlo es probar si tiene la propiedad de actualización dentro de la dirección o no:
const handleChange = (e) => { if (Object.keys(userTaxData.address).includes(e.target.name)) { setUserTaxData({ ...userTaxData, address: { ...userTaxData.address, [e.target.name]: e.target.value }, }); } else { setUserTaxData({ ...userTaxData, [e.target.name]: e.target.value, }); } };No puede actualizar los estados de los objetos anidados con claves de cadena; sin embargo, si aplana el objeto, puede hacerlo.
Ejemplo:
const flattenObject = (obj) => Object.assign({}, ... function _flatten(o) { return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({ [k]: o[k] }))) }(obj)) const unflattenObject = (obj) => { var result = {} for (var i in data) { var keys = i.split('.') keys.reduce(function(r, e, j) { return r[e] || (r[e] = isNaN(Number(keys[j + 1])) ? (keys.length - 1 == j ? data[i] : {}) : []) }, result) } return result } const handleChange = (e) => { const flattened = flattenObject(userTaxData) flattened[e.target.name] = e.target.value const unflattened = unflattenObject(flattened) setUserTaxData(unflattened); };(Código de aplanamiento tomado de esta publicación SO, código de aplanamiento tomado de esta publicación SO)