Excelente información, he aprendido mucho viendo tus cursos, desde PHP, Wordpress entre otros. Sigue así!! Saludos desde Venezuela. Para los que estén viendo este video en el 2023 la estructura quedaría así: {errors.titulo?.type === 'required' && Campo Requerido}
Hola Ignacio! Excelente forma de enseñar, me he quedado en tu canal porque explicas muy bien realmente. Respecto al codigo, me pasó que al limpiar el formulario con e.target.reset() se resetea el formulario pero no así el state, por lo que si por ejemplo si agregas un entry, al dar clic agregar se resetea, pero si das click en agregar nuevamente con los campos vacíos se agrega un nuevo record con el state anterior, ya que state nunca fue limpiado. La solucion que encontre fue usando reset() solito dentro de la función onSubmit, ese reset ya es parte de la librería de react-hook-form y resetea el state, solo tendrías que agregarlo a la hora de crear el hook de useForm. Se veria asi: const EjemploUno= () => { const {register, handleSubmit, formState: { errors }, reset} = useForm(); const [entradas, setentradas] = useState([]); const procesarFormulario = (data) => { console.log(data); setentradas([ ...entradas, data ]) // limpiar campos reset(); } return( ...
Primero decirte muchas gracias por el apoyo que das con tus videos tutoriales a personas de todo el mundo, y segundo que es genial la forma fácil que haces parecer lo que nos explica a través de estos videos, muchas gracias por todo el apoyo!
Excelente video hermano, aprendiendo full y muy buena explicación... Creo que en las ultimas versiones en la docu de react hook form ahora los errores se manejan de esta manera para consumo general. {...register("descripcion", { required: {value:true, message:'Campo obligatorio'} })}
Estuvo Perfecto para poner en practica los videos anteriores. La verdad que salio muy bueno todo y muy muy interesantes estos conceptos de react hook form.
3 de enero del 2022: la forma en que se usa el register en este video ya no funciona, ahora hay que así: {...register("titulo", { required: {value: true, message: 'Campo obligatorio'}, minLength: {value: 2, message: 'Título erróneo'} })}
De verdad no puedo decir que esta mal estos ejemplos, pero a los amigo visitante pendiente porque para las ultimas funciones de react y react-hook-form el codigo cambia un poco
yo debo hacerlo así, debido a los cambios de formhooks, ...register("name", {required:{value: true, message: 'Título Requerido'}})} pero ahora tengo el problema de que cuando le doy a "agregar" me borra el titulo, y se duplica la descripción, ejemplo, escribo título = aaa y descripción=bbb, le doy a agregar y me sale en consola {name='bbb'} un solo input, y en el documento me aparece título=bbb descripcion=bbb... no sé qué es lo que necesito hacer xD
Como se hace un downgrade a un proyecto laravel 6 a 5.8 ? No puse la pregunta en ese video ya que es de hace algun tiempo yme imagine que era menos posible que lo leyera
No se como solucionar esto, busco en internet pero nada, no me corren todos los codigos en chrome, y en conosla me sale esto: [HMR] Waiting for update signal from WDS...
Si alguien tiene problemas con el "errors" solo deben cambiar en la const la forma de ingresar el error, tal que quede asi: const { register, handleSubmit, formState: { errors } } = useForm(); 😉😉😉
no me reconoce al importarlo : import FormHook from './FormHook'; Ya lo instale la libreria como 10 veces con npm install react-hook-form, quede puede ser? gracias
Hola saludos gracias a sus videos he entendido mejor los hooks y los estados, pero vieras que en el video anterior y en este, con el uso de useForm, usando estas lines de codigo ref={ register({ required: { value: true, message: 'Campo obligaorio' } }) } me da error en consola y todo se rompe, el error que sale es Uncaught TypeError: path.split is not a function, pienso que es un error interno de la libreria de useForm ya que no se usa el split en ningun lado, podrias ayudarme gracias.
buenas bro tu error se debe a la version de react-hook-form actuamente es la 7 y tiene unos peque#nos cambios a diferencia de la version que utilizo Ignacio cuando grabo el video te recomiendo que mires la documentacion no es nada complejo practicamente es lo mismo, Suerte...
cambia tu codigo por este {...register("titulo", { required: { value: true, message: 'Titulo Obligatorio' }, minLength: { value: 2, message: 'El nombre tiene que ser mas largo' } })} , yo aqui hago dos validaciones, pero puedes ocupar solo una y te funciona
genial mucho mas facil de crear y capturar datos de un formulario seria bueno si tienes un tiempo y si puedes de capturar imagenes o archivos en el mismo formulario saludos
![#06 Curso de React Hooks [ Props en Componentes ]](http://i.ytimg.com/vi/AIy9VqxXfBs/mqdefault.jpg)
![#06 Curso de React Hooks [ Props en Componentes ]](/img/tr.png)
![React Hooks - Curso para Principiantes [ Fundamentos Reactjs ]](http://i.ytimg.com/vi/mOz5eNcEHu4/mqdefault.jpg)
![#03 Curso de React Hooks [ Formularios onChange & onSubmit]](/img/n.gif)
Excelente información, he aprendido mucho viendo tus cursos, desde PHP, Wordpress entre otros. Sigue así!! Saludos desde Venezuela.
Para los que estén viendo este video en el 2023 la estructura quedaría así:
{errors.titulo?.type === 'required' && Campo Requerido}
Hola Ignacio! Excelente forma de enseñar, me he quedado en tu canal porque explicas muy bien realmente. Respecto al codigo, me pasó que al limpiar el formulario con e.target.reset() se resetea el formulario pero no así el state, por lo que si por ejemplo si agregas un entry, al dar clic agregar se resetea, pero si das click en agregar nuevamente con los campos vacíos se agrega un nuevo record con el state anterior, ya que state nunca fue limpiado. La solucion que encontre fue usando reset() solito dentro de la función onSubmit, ese reset ya es parte de la librería de react-hook-form y resetea el state, solo tendrías que agregarlo a la hora de crear el hook de useForm. Se veria asi:
const EjemploUno= () => {
const {register, handleSubmit, formState: { errors }, reset} = useForm();
const [entradas, setentradas] = useState([]);
const procesarFormulario = (data) => {
console.log(data);
setentradas([
...entradas,
data
])
// limpiar campos
reset();
}
return( ...
Primero decirte muchas gracias por el apoyo que das con tus videos tutoriales a personas de todo el mundo, y segundo que es genial la forma fácil que haces parecer lo que nos explica a través de estos videos, muchas gracias por todo el apoyo!
Tengo tu curso en Udemy pero nunca esta demas refrescar las ideas. Sos excelente profesor, muy bien explicado todo! Te felicito!
Excelente video hermano, aprendiendo full y muy buena explicación...
Creo que en las ultimas versiones en la docu de react hook form ahora los errores se manejan de esta manera para consumo general.
{...register("descripcion", { required: {value:true, message:'Campo obligatorio'} })}
si justo eso tmb vi yo
Ignacio me encanta como explica las prácticas más claro imposible CACHAI
Me ha encantado esta forma de pintar los errores,amigo
Un genio Ignacio
Mañana hago el ejercicio, como siempre super el video
Excelente trabajo!!! Muchas gracias por compartir!!!...
me ENCANTAN tus videos!
tus vídeos son de excelente calidad muchas gracias !!!!
El explicando a la velocidad de la luz y yo con el video en 1.5 de velocidad 😅 jaja saludos hermano. Excelentes vídeos
Estuvo Perfecto para poner en practica los videos anteriores. La verdad que salio muy bueno todo y muy muy interesantes estos conceptos de react hook form.
Si a mi también me ayudó mucho! está entretenido React seguiremos aprendiendo jiji Saludos!
Brutal la forma de enseñar, sigue así
Instructivo y divertido!
Gran tutorial!
Me caí de pana Nacho, aprendo caleta contigo en Udemy XDD! slds
Excelente videooooo, no me quedo dormido como en la universidad!!!!!! XD
Muy buen video una vez más, desde ya esperando el próximo c: saludos.
Hola muy buen vidio! me encanto! una pregunta se podria implementar react-hook-form con react-bootstrap?
3 de enero del 2022: la forma en que se usa el register en este video ya no funciona, ahora hay que así:
{...register("titulo", {
required: {value: true, message: 'Campo obligatorio'},
minLength: {value: 2, message: 'Título erróneo'}
})}
Donde dice "título" iría el "name". (Es decir, ya no es necesario usar la etiqueta "name" sino que con el register ya se incluye)
@@jandresi no me funciona de ninguna de las dos maneras
Exelente trabajo, estoy aprendiendo mucho con tus cursitos! 😊
Genial! pronto más y más videos!
Gracias por el video :) y mas tambien por tus ejemplos que nos das :)
seria genial un curso con ant design! gracias!!
Excelente de esta forma, con Hook Form!
excelente video , pero una consulta "register" no me reconoce el navegador y eso ocasiona que no me aparezca nada en el navegador
De verdad no puedo decir que esta mal estos ejemplos, pero a los amigo visitante pendiente porque para las ultimas funciones de react y react-hook-form el codigo cambia un poco
yo debo hacerlo así, debido a los cambios de formhooks, ...register("name", {required:{value: true, message: 'Título Requerido'}})} pero ahora tengo el problema de que cuando le doy a "agregar" me borra el titulo, y se duplica la descripción, ejemplo, escribo título = aaa y descripción=bbb, le doy a agregar y me sale en consola {name='bbb'} un solo input, y en el documento me aparece título=bbb descripcion=bbb... no sé qué es lo que necesito hacer xD
seguro tienes repetido los nombres
de las variables
Como se hace un downgrade a un proyecto laravel 6 a 5.8 ? No puse la pregunta en ese video ya que es de hace algun tiempo yme imagine que era menos posible que lo leyera
No se como solucionar esto, busco en internet pero nada, no me corren todos los codigos en chrome, y en conosla me sale esto: [HMR] Waiting for update signal from WDS...
Buenísimo!
Gracias 🎉 🎉 🎉
@@bluuweb estaría buenísimo aprender algo sobre posicionamiento web con react y vue.
Si alguien tiene problemas con el "errors" solo deben cambiar en la const la forma de ingresar el error, tal que quede asi:
const { register, handleSubmit, formState: { errors } } = useForm();
😉😉😉
no me reconoce al importarlo : import FormHook from './FormHook';
Ya lo instale la libreria como 10 veces con npm install react-hook-form, quede puede ser? gracias
import FormHooks from './components/FormHook';
Hola saludos gracias a sus videos he entendido mejor los hooks y los estados, pero vieras que en el video anterior y en este, con el uso de useForm, usando estas lines de codigo
ref={
register({
required: { value: true, message: 'Campo obligaorio' }
})
}
me da error en consola y todo se rompe, el error que sale es Uncaught TypeError: path.split is not a function, pienso que es un error interno de la libreria de useForm ya que no se usa el split en ningun lado, podrias ayudarme gracias.
buenas bro tu error se debe a la version de react-hook-form actuamente es la 7 y tiene unos peque#nos cambios a diferencia de la version que utilizo Ignacio cuando grabo el video te recomiendo que mires la documentacion no es nada complejo practicamente es lo mismo, Suerte...
cambia tu codigo por este {...register("titulo", {
required: { value: true, message: 'Titulo Obligatorio' },
minLength: { value: 2, message: 'El nombre tiene que ser mas largo' }
})} , yo aqui hago dos validaciones, pero puedes ocupar solo una y te funciona
& = Ampersand (En inglés) | & = Conjunción Copulativa (En Español)
Tendrás este curso en udemy? Para apoyarlo
Hola aun nada planificado lo estoy aprendiendo al igual que ustedes 🤙🏾
genial mucho mas facil de crear y capturar datos de un formulario seria bueno si tienes un tiempo y si puedes de capturar imagenes o archivos en el mismo formulario saludos
Las imágenes son mi debilidad pero lo haremos jijij Saludos!
amigo seria muy bueno que hicieras una comparación de ReactJs y React Native.
Holi, bonito ingles jajaja XD 👌
Es lo mejor de mi jajajaja
Te faltó pasar el KEY en la iteración de los . Me desuscribo.... Mentira xD
Jajajaja siempre me pasa jijiji
amigo seria muy bueno que hicieras una comparación de ReactJs y React Native.