Inicie a estudiar react y soy novato. Viendo un videotutorial; en el que se estan pasando valores del state, del hijo(NuevaCita.js) al padre(App.js) en un Class Component, a traves de una funcion llamada crearNuevaCita()
para esto se crea un nuevo objeto const con una copia del state usando el spread operator asi: const nuevaCita = {...this.state.cita};
pero veo que luego se añade un valor id(este no estaba en el state) al objeto NuevaCita de la forma nuevaCita.id==uuid()
; esto me causa una duda...
en vez de hacer funciones de tipo handleChange()
y crear un nuevo state
que puede ser algo un poco trabajoso, no seria mas eficaz crear un nuevo objeto tomar los valores de los campos del formulario añadirlos de la forma nuevaCita.mascota=document.querySelector('#mascota').value;
y luego pasar este objeto al padre. Mi duda es que si siempre se deben utilizar el state para manipular los datos es por buenas practicas o por algo en particular.. Gracias y saludos
handleSubmit = (e) =>{
e.preventDefault();
//extraer los valores del state
const {mascota, propietario, fecha, hora, sintomas} = this.state.cita;
//validar que todos los campos esten llenos
if(mascota === '' || propietario === '' || fecha==='' || hora ==='' || sintomas === ''){
this.setState({
error: true
});
//detener la ejecucion
return;
}
//generar objeto con los datos
const nuevaCita = {...this.state.cita};
nuevaCita.id=uuid();
console.log(nuevaCita);
//agregar la cita al state de la app
this.props.crearNuevaCita(nuevaCita);
pudiera ser asi y no cree el state y estoy pasandole el mismo objeto al padre:
//creo el objeto
const nuevaCitaPrueba={};
//generar objeto con los datos
nuevaCitaPrueba.mascota=document.querySelector('#mascota').value;
nuevaCitaPrueba.propietario=document.querySelector('#propietario').value;
nuevaCitaPrueba.fecha=document.querySelector('#fecha').value;
nuevaCitaPrueba.hora=document.querySelector('#hora').value;
nuevaCitaPrueba.sintomas=document.querySelector('#sintomas').value;
//agregar la cita al state de la app
this.props.crearNuevaCita(nuevaCitaPrueba)