Hola! Con las últimas actualizaciones de la librería de react-hook-form con el Código actual pueden que obtengan el siguiente error (""Getting Uncaught TypeError: path.split is not a function in react") a la hora de llamar al 'register' dentro del input por medio de la propiedad ref. Para arreglarlo se debe reemplazar dentro del input el ref = {register} con {... register ('value_name')} Ejemplo1: Version 6.X.X: Version 7.0.X: Ejemplo2: From version 6.x.x function MyComponent(props) { const { register, handleSubmit, errors } = useForm(); const onSubmit = (values) => {...}; return ( {errors.message && errors.message.message} ); } To version 7.x.x function MyComponent(props) { const { register, handleSubmit, formState: { errors }} = useForm(); const onSubmit = (values) => {...}; return ( {errors.message && errors.message.message} ); } Pueden ver como se soluciona googleando el error o buscandolo en stack over flow: stackoverflow.com/questions/66927051/getting-uncaught-typeerror-path-split-is-not-a-function-in-react.
Gracias Maestro. El tema de hook form ha debido de cambiar porque no conseguía que funcionase. Al final me ha funcionado de otra manera. Pongo el código para ayudar a otros que tengan el mismo problema. const { register, formState: { errors }, handleSubmit } = useForm(); {errors.titulo && {errors.titulo.message} }
next-dev.js?3515:20 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? me apareció ese error de todas formas alguna idea ?
A los que estén haciendo el curso ahorita, lo de react-hook-form cambió. Ya no es como en el curso (a menos que tenga versión antes de la 7). La nueva forma es: input { ...register('titulo', { required: true } ) }
Mi codigo para ayudar a quienes no dan con los cambios, le dejo comentado import React, { Fragment, useState } from 'react'; import { useForm } from "react-hook-form"; const HookForm = () => { const {register, handleSubmit, formState:{errors}} = useForm(); //cambio errors const onSubmit=(data, e) =>{ console.log(data) // limpiar campos e.target.reset(); } return ( Mi Primer Hook Form //cambio la forma del input {errors.titulo && Campo Requerido} //otro cambio Enviar ); } export default HookForm;
Parece que la documentación se actualiza continuamente :´v Por si alguien desea, asi lo hice: //----------------------------------------------------------------------------------------------------------------// import React, { Fragment } from 'react'; import { useForm } from "react-hook-form"; const FormHook = () => { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); return ( Formulario {errors.titulo && errors.titulo.type === "required" && Este campo es requerido} {errors.titulo && errors.titulo.type === "maxLength" && Solo se permite 10 caracteres como maximo} Enviar ); } //----------------------------------------------------------------------------------------------------------------//
OJO, las personas que estan haciendo el video con la nueva version, pude corregir gracias a los comentarios de otros usuarios y sus soluciones para que el codigo quede lo mas parecido al video, de esta forma me funciona a mi: (no pude cambiar donde dice message a titulo porque por algun motivo no sirve, dejenlo asi) const FormHook = () => { const {register, formState: {errors}, handleSubmit} = useForm(); const onSubmit = (data, e) => { console.log(data); e.target.reset() } return ( Formulario Hook {errors.message && errors.message.message} Enviar ); }
Hola Ignacio. Me gustaría, como a varios por los comentarios, que actualices este video. Con los cambios en React Hook Form y algunas otras particularidades de la librería ya que la documentación oficial es un poco ambigua a mi entender.
Excelente ejercicio y ejemplo, muy bien explicado, en 2022 ha cambiado un poco las cosas, si se ejecuta de la misma manera que el video habrán errores, en los comentarios ya pusieron las debidas soluciones.
Tutorial demasiado viejo, totalmente desactualizado y da muchisimos problemas, no debería seguir publicado este video. Me hizo perder mucho tiempo. Profe, por favor no nos haga perder tiempo con estos videos, por favor quítelos porque estan desactualizados...Gracias.
Hola gente, estoy usando el form de React Hooks, cuando pongo validaciones de tipo de datos (solo letras) me toma el espacio como un error, y no lo estoy pudiendo resolver. pattern: /^[A-Za-z]+$/i ese es el requerimiento q estoy usando. Me podrían decir como hacer para q no me tome el espacio como error? gracias
No funciona el parámetro "required"; por lo menos en mi entorno. Incluso hice copy y pega 🤢, desde tu guía, porque la verdad que ya he perdido +2 horas tratando de encontrar el error, e igual me sigue dando el mismo problema. No se la manera de enviarte un screenshot del error. Pensé que iba bien, perooooo ahora dudo y muchísimo si seguir con React...😒
Bueno yo recien lo estoy viendo pero para los que tienen el error de Getting Uncaught TypeError: path.split is not a function in react". Basicamente lo que tienen que hacer es remplazar el ref por esto : {...register("message", { required: "Required" })}
Amigos necesito una asesoría rápida de ante mano gracias: Quiero hacer 4 inputs y los quiero hacer de esta manera con hook form la cosa es q no me esta funcionando bien al momento de usar parseFloat me dice q los valores ingresados se toman como enteros no más que podría hacer allí? Si alguien tiene una idea agradecido 🙏 🙂
tengo un problema con el ref=....al comenzar a trabajar con los objetos dentro de esto falla la carga en la web al punto en que no aparece el formulario
Amigo como desestructuro los valores del form. Por ejemplo yo quiero agarrar el valor del titulo... const {titulo} = getValues(); que viene del react hook form Pero no me funciona no es asi. Como obtengo los valores que estan register?
Acabo de empezar con el tutorial y como dicen algunos comentarios la versión de formhook no es la indicada. Sin embargo debo mencionar que no pude obtener el mensaje de error desde la clave `message` del objeto . tuve que obviarlo y lo dejé de la siguiente manera: {errors.titulo && "Campo obligatorio"} .
Iba borrar este mensaje, pero mejor lo resuelvo yo mismo para otros. Lo que hay que hacer es cambiar el TRUE de la clave [required] por el texto a mostrar. Esto : required: true Por esto: required: "Campo obligatorio"
En el capitulo anterior agregaste el type:submit en el button,es necesario esto?ya que button por defecto realiza un submit?y a demas lo capturabas en form con el metodo onSubmit....me quedo esa duda gracias
@@bluuweb Desearía muchísimo que después de React entremos a Gatsby.JS en esta misma serie para comprarlo en UDEMY también como lo hizo con Vue y Nuxt.js , yo lo compré :)
Gracias! aunque ya haya quedado algo deprecado me sirvió para aproximarme a la herramienta y continuar en una búsqueda mas actualizada. Valoro mucho tu aporte!
Me alegra que te haya gustado. Esa librería es muy genial, pero es aún mas genial pensar que pude recomendar algo genial a alguien que en su momento me ayudó a entender las nociones básicas de flexbox y bootstrap. ¡Un abrazo Parcero! (From Colombia)
Hola , cuando quiero instalar por npm el React Hook Form, me sale este error: found 5 vulnerabilities (3 moderate, 2 high) run `npm audit fix` to fix them, or `npm audit` for details. Cualquiera sea lo que elijo, no se logra instalar bien. Ayuda por favor
No entendí, por qué la data y event los recibes en OnSubmit? No se supone era la de Handle? Y por qué al boton no le pones type="submit"? Como en el video pasado con e.preventDefault()
Hola quise aplicar las validaciones al formulario del ejemplo anterior, pero ahora no obtengo los valores ingresados con {datos.nombre} esta vacio y el event.preventDefault me da error, sabes que puede ser ?
Buenas Bluuweb. Puedo utilizar react hook form para crear un form donde tiene la seguiente lógica: form)> child 1) child 1.1) Donde los inputs están en el último nível (child 1.1.1). Tiene está lógica porque van a ser creados tantos grupos como existan childs 1.1.. y todo esto dentro de un formulário. Esta liberaria me permite crear algo así, controlar cada input? Cada grupo tiene várias opciones radio button.
Hola amigos, me sale un error al instalar react-hook-form con npm, me sale found 1 high severity vulnerability, y al checkar con npm audit me indica que es en Prototype Pollution. De antemano gracias por la ayuda. Saludos
Tengo una duda, en esta ocasión en el button ya no le pusiste type = "submit", la función que se creó se ejecuta con cualquier botón que está en el formulario, como se puede hacer para que solo un botón llame a la función ? Gracias y muy buen video :D
La verdad impresionante video querido Ignacio!!! saludos desde la Rioja - Argentina Amo la música, soy cantante pero además estoy trabajando mucho en mi otra faceta profesional que es de relacionarme mas con el mundo de la programación, estoy realizando cursos en donde nos dieron actividades y tu video me ayudó bastante ------------------------------------------------------------------------------------------------------- Para los que tengan fallas asi quedaria el codigo con la V.7 import React, { Fragment } from 'react'; import { useForm } from "react-hook-form"; const FormularioHook = () => { const {register,handleSubmit, formState: { errors }, reset} = useForm(); const onsubmit = (data,e) =>{ console.log(data); reset(e.target) } return( FORMULARIO HOOK {errors.name && errors.name.message} ENVIAR ) } export default FormularioHook;
![#04 Curso de React Hooks [ React Hook Form ]](/img/logo.svg){kind=logo}
