Crea formularios fácilmente con React Hook Forms

[@deltecharch]

La explicación estuvo de maravilla. Estoy siguiendo un curso que compré en Udemy y me ha sido de gran ayuda. Lo que veo en el curso, luego lo busco en KZbin para comprenderlo aún más. ¡Qué bueno que existan este tipo de contenidos!

[@osw2050]

Muchas Gracias no sabes cuanto me ayudaste gracias por tu tutorial único en todo KZbin no hay como el tuyo ,tu video ilumino mi día ,semana y mes muy agradecido

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@heidisanchez5786]

Me gusta mucho cómo explicas y además la rapidez con la que lo haces, no hay desperdicio de tiempo ni uno se duerme, soy tu fan.

[@Garajedeideas]

¡Gracias! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)

[@mariogiron]

Graciasss! Es importante no dormirse 😁

[@HigorRocha-l1i]

He conseguido entenderlo a la perfección, explicas todo correctamente. Muchas gracias. Un saludo.

[@Garajedeideas]

¡Gracias a ti! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)

[@jeffersonmaldonado2190]

Excelente explicación, una de los mejores tutoriales que he visto en mis 18 años de carrera como desarrollador. Soy docente de matemática e informática. Saludos desde Venezuela

[@juliochirinos2725]

Estimado, en principio le felicito por la buena dicción y su facilidad para hacer llegar el mensaje. A veces menos es más. Y eso es justo lo que usted hace. Simple, al grano y con un lenguaje muy normal que hace que uno entienda con mucha facilidad. Excelente material!

[@Garajedeideas]

Gracias por el feedback! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@robinsonmontero4275]

Muchas gracias hermano, eso era justo lo que estaba buscando una forma de manejar los formularios de manera que me permita tener control sobre el mismo en todo momento y acceder al valor que tienen sus campos, sin tener que hacer submit.

[@zenzen9043]

¡Excelente trabajo! y gran didáctica. Saludos cordiales desde Argentina, gracias por compartir

[@SerEfGonzalez]

Muy buen trabajo, excelente explicación, saludos desde Generall Madariaga en la Pcia. de Buenos Aires República Argentina!!!

[@MrEstebanfierro]

Una excelente alternativa para crear formularios de forma muy rápida y eficiente, muchas gracias por compartir.

[@rafapaz5864]

Señor, es usted una bestialidad de tifon crack master god!!! muchas gracias!

[@rana_zurda]

explicas muy bien, la manera en la que avanzas sobre el tema, los ejemplos, excelente! gracias por el contenido

[@betobogino]

Cuanto agradezco haberme encontrado con Garaje de Ideas! Muy buen vídeo, gran explicación

[@tiagoramirez2001]

Muchas gracias por la info. Directo al grano y muy bien explicado. De nuevo, muchas gracias

[@alebarbaja]

🤯 Que gran explicación sobre el uso de esta librería, ¡muchas gracias!.

[@claudioperezdiaz]

muchas gracias, me sirvió mucho el video. saludos desde chile

[@k.santiagodiaz3744]

Excelente, por aqui tienes a un nuevo subscritor. Gracias!

[@UriiSanchez]

Te agradezco, me sirvió bastante este video ya que me dio una idea de como controlar diferentes formularios y tener acceso al state

[@victorzambrano3019]

que bien explicas lo entendi todo rapido a los demas nada no saben explicar

[@Garajedeideas]

👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI

[@JulioAguero]

Excelente explicación, muy simple y claro... continua así... te estare apoyando.

[@coder116]

Excelente explicación. Muchas gracias por compartir como funciona la creación de formularios con React Hoook Forms. Saludos desde Caracas-Venezuela.

[@ignaciomustafha4170]

Tremendo video!! Saludos desde Argentina

[@RicardoRamirez-gf4qq]

muy muy bueno saludos desde argentina !!

[@mafrunepi]

Gracias por el vídeo. Conciso y bien explicado. Tenéis un suscriptor más.

[@woodenhouse8531]

Muchas gracias, me ha ayudado mucho el video!

[@Alejo28356]

Demasiado excelente! Mil gracias por este tipo de contenido. Like y suscrito!

[@escuderomdz]

Excelente tutorial, me sirvió muchísimo. Gracias por compartir!

[@franciscopena1140]

Me aportó mucho tu video. Gracias!

[@hugoisaiasalvarezgarcia2016]

Genial, explicas de una manera muy sencilla y clara, lo capte muy rápido, gracias

[@jeissonalbertopinzon476]

bien .... seria bueno una segunda parte seguro -- gracias por el video

[@dearalex2056]

Ostras que videazo! Saludos desde Nicaragua

[@diegocurutchet_code4580]

me encanta como explicas, muy fácil de entender!

[@juanscasado]

Gracias! muy util y estaremos por aqui ya que ha sido muy util su tiempo!!!

[@franciscomolina-dev]

No conocia este hook pero se gano mi corazon jajaja. Gracias por explicarlo bien claro! Suscrito y like.

[@luislavayen9495]

Gran explicacion

[@jesusamaganaaguilar8767]

GRACIAS POR ESTE BELLO VIDEO

[@juanrybritezpy]

Que buen video, muchas gracias crack!

[@GamesMedleyBienvenido]

Este tutorial es hermoso, ahora puedo seguir con mi curso

[@Garajedeideas]

Gracias por tu comentario y nos alegramos de que te haya servido de ayuda :D

[@tatoElpaisa]

Tremenda Utilidad. Gracias por el video.

[@dariocuray6458]

Kapo para explicar se me hizo muy sencillo entender.Saludos

[@danielespanadero]

Muy buen vídeo! Muchas gracias por compartir este conocimiento! Un abrazo!!

[@jesusre8495]

Excelente video, gracias!

[@carolnavia3943]

Excelente la manera de explicar. Me ayudó mucho. Saludos

[@santiagotorres8680]

Muchas gracias por compartir tu conocimiento :)

[@gabrielsaldana9863]

MUY BUENO BUENISIMA EXPLICACION

[@faviocabral2675]

Simple y conciso

[@poisonov]

Mario eres un profesor excelente, gracias por compartir

[@gilbertardila]

Excelente Hook muy bien explicado como siempre

[@GustavoHernandez-he4gd]

muy buena explicación, gracias por aportar

[@arigrafik]

¡Buenísimo! Gracias por hacer este vídeo, me hubiese gustado que explicaras como colocar la contraseña, pero ya eso lo investigaré por mi cuenta. Por cierto me he suscrito a tu canal, espero que puedas continuar publicando más contenido actualizado sobre React =) ¡Un saludo!

[@victoriarodriguez2137]

que magnifico video

[@tomasliendo3127]

Muy clara la explicación, muchas gracias !!!! =D

[@josecedeno1957]

Excelente aporte amigo, muy bien explicado!!!

[@Willyrosa55]

Que buen video, explicas muy muy bien, gracias por los conocimientos compartidos :D

[@CreceXDiez]

Grande hermano, excelente explicación

[@HealthyBodyMagcom]

super genial! buen contenido!!! te felicito

[@craulynfeliz4177]

Uff Excelente video , un suscriptor mas

[@martincarp4671]

Muy buen tutorial, me llama la atencion la linea 17 const incluirTelefono = watch('incluirTelefono'); ya que se define como una constante y lo que entrega watch() varia

[@DavidLopezCubo]

Excelente y muy claro!

[@agustins.2381]

Muy bueno el vídeo! Me hubiese servido mucho que hubieras explicado también como trabajar con check box y switch

[@lancerrider]

Muy bien ganado su like 👏

[@rgbesmedia]

Buenísimo 🎉

[@victorioortega9509]

Gracias

[@juanmanuelburdet9699]

Un groso, super clarisimo, gracias

[@codigonow995]

Saludos. Gracias por el tutorial. Me hace falta saber cual es el codigo para enviar a la base de dato en este caso. Gracias.

[@cufando]

Geeeniaaal Muchas gracias!

[@all-eter-4289]

Simplemente Perfecto XD

[@8koi245]

fue una pesadilla como no tenés idea joder, ahora la quiero dejar bonita y bueno que mejor que agregar esta lib!

[@Johnlb91]

Wow! muchas Gracias!

[@transformers886]

muchas gracias

[@estebancarreno7310]

excelente video

[@TheAndres7777]

buen video!

[@saulhuarcayaquispe5236]

Gracias :3

[@joacovega9263]

Re buen video, ya me suscribí. Una consulta, como se podría hacer para vaciar los inputs una vez enviado los datos?

[@rodgon823]

Excelente video! Muchisimas gracias, solo tengo una duda ¿Como podriamos limpiar los campos al hacer el submit?

[@marcemelgar]

Excelente! Mil gracias por la información. Te ganaste un nuevo Sub! Una consulta. Si quiero validar 2 emails para que sean iguales. La función chequearía si value.email1 === value.email2 ??

[@ericksegura478]

Genial

[@esencoder]

Genial!!!

[@3Bluewind]

GRACIAS!!!!!

[@victorsandoval6145]

15:25 custom validation

[@caudiovisual_creativo]

Como podría precargar datos o rellenar los inputs, luego de realizar la consulta a un API

[@Artifismo]

👌

[@itsKreisler]

Esta increíble....!!!! En el onSubmit que create ya puedo hacer una petición con el data y enviarla a una url mediante fetch?

[@Garajedeideas]

Hola Kreisler! Exacto, en el onSubmit podrías tomar todos los datos recogidos a través del formulario y enviarlos utilizando fetch o cualquier otra alternativa como por ejemplo axios

[@jamito58]

como puedo comparar dos campo por ejemplo contraseñas que se a igual o no

[@magaliacevedo8153]

Hola buenas como se hace el envio al correo, hay algun video? gracias

[@all-eter-4289]

Entonces si quiero recibir el valor del check debo estar manejandolo con un estado? o hay algun modo de que el mismo retorne un true o un false segun este activo o no?

[@Garajedeideas]

Hola! Mediante el método watch que nos ofrece el hook podemos monitorizar el estado del check, pero si necesitas guardar el valor, deberías manejarlo a través del estado del componente.

[@all-eter-4289]

@@Garajedeideas gracias ☺️!!

[@mariacandelareynoso1337]

barvaro!

[@sebamise2406]

Tremendo videazo, me suscribo! el único inconveniente que tengo y me pregunto si podrían ayudarme es que el mensaje de error aparece siempre, es decir debería de aparecer cuando se intenta enviar el formulario, pero en el estado actual, apenas escribes una letra aparece el mensaje y eso no quedaría bien... (El formulario funciona simplemente es un problema de estética mi problema)

[@gahaIor]

Hola, y donde configuras el correo al que quieres recibir la info?

[@Garajedeideas]

Hola! En este caso necesitarías un server de backend como Node.js y Express que procese los datos enviados en el form y los envíe a tu correo. También puedes utilizar algún servicio de cloud para realizar el envío como EmailJS: www.emailjs.com/

[@dvdtucapo]

Muy bueno! Pero no entendí donde va el mothod y el action del form :/

[@yanluisnunezlara319]

Me imagino que la función en el evento submit del formulario llamada handleSubmit que viene del Hook y que a la vez ejecuta la función creada llamada onsubmit, ahí se usa alguna API como fetch, o httpsrequest o axios para hacer el envío de datos.

[@yanluisnunezlara319]

Ejemplos: const onSubmit = async (data) => { try { const response = await fetch('URL_DE_TU_API', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); if (response.ok) { console.log('Datos enviados correctamente'); } else { console.error('Error al enviar los datos'); } } catch (error) { console.error('Error en la solicitud:', error); } }; ya la función handleSubmit se encarga de gestionar los datos que se escriben en los elementos del formulario.

[@Redpurplx]

Tengo un problema, al momento de utilizar formState errors, mi app se pone en blanco completamente. Alguien me podría ayudar?

[@Skatefromnqn]

Quisiera realizar una consulta, en la línea :{errors.nombre?.type === 'required' && El campo nombre es requerido} me aparece el siguiente error "Module parse failed: Unexpected token (369:21). You may need an appropriate loader to handle this file type." Hay alguna dependencia que no tenga instalada o se puede realizar de otra forma? Gracias y excelente video

[@Garajedeideas]

Hola Leonel! Muchas gracias por tu comentario! En cuanto al error que te sale, necesitaríamos ver directamente cómo te sale el error en el gestor de código. Tal cual nos lo comentas no podemos darte solución al problema 😅

[@cesaraugustojaramillohen-vu2pn]

muy buenas tardes, excelente la expliación, estoy empezando en React pero me encuentro con una ncesidad, y es crear dentro de un formulario validado, 2 cajas de texto para ingresar valores numericos y una tercera para mostrar el resultado, alguien me pude dar una idea de como hacerlo, muchas gracias

[@mauriciocruzlopez4526]

E usado el valor por defecto en el "hook useForm:" pero cuando hago esto las validaciones por ejemplo de campo vacío (required) no funciona, es decir no me aparece nada. Borro ese valor por defecto y funciona. Ni siquiera funciona cuando le doy al botón de enviar el formulario. Supongo que cuando tiene el valor por defecto ya se almacena y no hay vuelta. Voy a investigar para encontrar una solución.

[@mauriciocruzlopez4526]

Excelente video, e aprendido un montón. Es increíble como los errores me persiguen xd. Trate de escribir un poco mas en el comentario pero no me dejaba. tuve que recargar la página. Supongo que fue porque borre la cache del navegador (1h).

[@hugoisaiasalvarezgarcia2016]

Tengo una duda como se podrian pasar datos a nuestros inputs, es decir ya tener almacenada información en un estado y después pintar esa información en el formulario no logro encontrar la respuesta

[@Garajedeideas]

Hola Hugo, para poder pasar datos por defecto al formulario en su creación hay que hacerlo a través de la definición del propio hook, algo así: useForm({ defaultValues: { nombre: 'Mario', direccion: 'C Falsa 123', email: '[e-mail]', edad: 23, pais: 'España' } });

[@claudioperezdiaz]

alguien sabe como hacerlo funcionar con reactstrap ????

[@melisacampos2540]

Buenisimo pero no me carga la pagina

[@antoniojesusmoragalvan5471]

pero como lo hacemos funcional???

[@Garajedeideas]

Hola Antonio, esta librería está enfocada a maquetar el formulario y su funcionalidad. Para realizar envíos del formulario habría que hacerlo a través de otra tecnología o sobre alguna aplicación de backend.

[@ing.alexanderbarajas6736]

@@Garajedeideas Buen día!!! Muchas gracias por sus videos, me parecen muy claros. Siguiendo este hilo quisiera saber como se puede hacer un update de un registro utilizando este hook, Como se cargan los datos a los campos para editarlos? se puede usar useState?

[@8koi245]

"adivino en principio no soy" HAHAHHAHA típico