Tengo un input select con su atributo name="prefix".
Tengo tambien el siguiente estado en react:
const initialForm = {
name: "",
email: "",
prefix: "",
area: "",
phone: "",
country: "",
comments: "",
};
const [form, setForm] = useState(initialForm);
Y puedo actualizar el form de la siguiente forma:
setForm({
...form,
[e.target.name]: e.target.value,
});
Eso me coloca en el atributo prefix lo que viene en el value del input.
Ahora necesito hacerlo de esta forma:
setForm({
...form,
prefix: e.target.value,
});
Y no me funciona, he intentado con
setForm({
...form,
form.prefix: e.target.value,
});
Y tampoco me funciona, siendo que haciendolo en un objeto normal js si funciona:
let obj = {
name: "",
prefix: ""
}
obj = {...obj, prefix: "234"}
Cual seria la forma de lograrlo en el Hook?
ACTUALIZACION
He dado con el problema, pero no entiendo porque sucede esto con el spreadOp en el Hook.
Yo he puesto un codigo resumido pero aunque el original es bastante mas complejo aqui pongo mas o menos una version mas light:
import { useState } from "react";
const inicial = {
nombre: "",
prefix: "",
tel: "",
};
const Form = () => {
const [form, setForm] = useState(inicial);
const handleChange = (e) => {
if (e.target.tagName === "SELECT") {
console.log(e.target[1].dataset.prefix);
setForm({
...form,
[e.target.name]: e.target.value,
prefix: e.target[1].dataset.prefix,
});
}else //si no pongo este else se guarda ell target.value, pero no ell data-att
setForm({
...form,
[e.target.name]: e.target.value,
});
};
console.log(form);
return (
<div>
<input
type="text"
name="nombre"
value={form.nombre}
placeholder="Nombre"
onChange={handleChange}
/>
<select name="tel" value="" onChange={handleChange}>
<option value="">Telefono</option>
<option value="345-7890" data-prefix="234">
3456-7890
</option>
<option value="1234-4567" data-prefix="678">
1234-4567
</option>
</select>
</div>
);
};
export default Form;
el caso es que tengo varios inputs y un select que tiene a parte de un value un data-attribute y necesitaba ingresar al estado el valor (value) mas el valor de ese data-attr, por lo tanto la unica forma era detectando si el input es de tipo select y ahi hacer un setState(). Lo que no entiendo es porque si no esta el else el atributo prefix no se actualiza, no es que el spreadOp agrega al objeto sin modificar lo anterior?
A lo que me refiero es esto:
let obj = {
name: "",
prefix: ""
}
obj = {...obj, name: "Raul", prefix: "234"}
obj = {...obj, name: "Hernan"}
console.log(obj);
Aqui estoy sobreescribiendo pero la propiedad prefix queda con el valor del primer seteo
setForm
?