Creación del componente UserForm; y Hook useInputValue

Muchas veces he leido que un codigo legible es mejor que un codigo “resumido”, creo que en este caso el cambio de “value={email.value} onChange={email.onChange}” a “{...email}” le quita legibilidad

Excelente clase, el trucazo de el useInputValue y pasar simplemente con rest operator esta genial, no lo esperaba.

use-input-value en npm
He creado una implementación un poco extendida del hook, para permitir manejar estados que permitan visualizar de mejor forma los errores y también manejar la validación de los campos.

Demo

Cree un hook mas apropiado por lo menos para mi en la carpeta hooks

import React, { useState } from 'react'

const useFormUser = initial => {
    
    const [ value , setValue ] = useState(initial)

    const onChange = e => setValue({
        ...value,
        [e.target.name] : e.target.value
    })

    return [
        value,
        onChange
    ]

}

export default useFormUser

y en el form quedo asi

import React, { useState } from 'react'
import useFormUser from '../../hooks/useFormUser'

export const UserForm = ({ onSubmit }) => {

    const initialState = {
        email: '',
        password: ''
    }

    const [ state , onChange ]  = useFormUser(initialState)

    const { email , password } = state

    return (
        <form onSubmit={onSubmit}>
            <input
                placeholder="Email" 
                name="email"
                value={email}
                onChange={onChange}
            />
            <input
                type="password"
                placeholder="Password" 
                name="password"
                value={password}
                onChange={onChange}
            />
            <button type="submit">Iniciar Sesión</button>
        </form>
    )
}

Cuando es un hook para los inputs, como se manejan las validaciones de los campos??

mmm interesante creo que tendre que verlo unas 2 veces para captarlo por completo que buen curso

Nunca me he divertido tanto en aprender un lenguaje de programación, haces que el curso de React Native sea juego de niños … consejo : cambien el curso de react native pero siendo tu el profesor , un abrazo y felicitaciones

Brutal como se combina el rest operator junto con el custom hook

Increible el hook para los inputs!, me voló la cabeza jejejeje

Mi solucion con poco mas moderna con React Hook Form
Documentacion del hook

import React from 'react'
import { useForm } from 'react-hook-form'

export function FormLogin ({ activateAuth }) {
  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = data => {
    console.log(data)
    activateAuth()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' placeholder='User' {...register('email', { required: true })} />
      <input type='password' placeholder='Password' {...register('password', { required: true })} />
      {errors.emailRequired && <span>This filed is required</span>}
      <input type='submit' />
    </form>
  )
}

Comparto mi solución al estado sin tener que crear un hook adicional:

const [formData, setFormData] = useState({ email: '', password: '' });

const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
};

<input ... onChange={handleChange} />

Creo que estamos pidiendole mucho al navegador con la forma que hace el profesor, una versión más actualizada sería…

import React, { useRef } from 'react'
export const UserForm = ({ aproveAuth }) => {
  const form = useRef(null)

  const handleSubmit = () => {
    const formData = new FormData(form.current)
    const formEntries = Object.fromEntries(formData)
    console.log(formEntries)
    aproveAuth()
  }
  return (
    <>

      <form ref={form}>

        <input type='text' name='email' placeholder='Email' />
        <input type='password' name='password' placeholder='Password' />

      </form>
      <button onClick={handleSubmit}>Sing in</button>

    </>
  )
}

Si al momento de llenar el formulario y presionar la tecla Enter y no sucede nada, solo hace falta añadir el siguiente botón dentro del form para habilitar esta funcionalidad:

<button type='submit'>Conectar</button>

😄

Buenos dias muy buena clase realice unas modificaciones a mi codigo asi lo eniendo mucho mejor sin embargo el curso va genial

 const [state, setState] = React.useState({
        email: "",
        password: ""
    });

    const handleOnCahnge = e => {
        const name = e.target.name;
        const value = e.target.value;
        setState({
            ...state,
            [name]: value
        });
    };

Yo aquí no creo que sea conveniente hacer un input controlado (un input donde cada que cambie el input, el estado cambie), ya que eso es útil en search bars, pero en formularios solo es importante ver el input cuando se va a hacer un submit, de otra forma solo estamos re-renderizando un component por cada vez que el usuario escribe

super util el hook para forms!!!

Mucha refactorización es una pega del curso, definitivamente

Me gusto bastante el hook useInputValue

Mi solucion con targe y name como parametros de input:

const UserForm = ({ onSubmit }) => {
    const [form, setForm] = useState({});

    const handleForm = e => {
        setForm({
            ...form,
            [e.target.name]: e.target.value,
        });
    }

    return (
     <form onSubmit={onSubmit}>
                <input placeholder="Email" name="email" value={form.email} onChange={handleForm} />
               <input placeholder="Password" name="password" type="password" value={form.password} onChange={handleForm} />
            <button>Iniciar Sesión</button>
        </form>        
    );
}

Una ternaria que puede resultar de ayuda.

  const onChange = (e) => setValue(e.target ? e.target.value : '')

¿Por que se inicializa useState con un string vacio, si usualmente se hace con un arreglo vacío?, o mas bien, como identificamos que tipo de dato esperamos para el useState

b

Ya un poco más claro como consumir hooks externos, con mejores prácticas

Qué sería más eficiente, reescribir el estado por cada cambio con un setEmail, setPassword o hacer un useRef y obtener los values cuando hagamos submit?

Un consejo para ayudar con la validación de si es un email:
campo en tipo email y required

<input
        type='email'
        placeholder='Ingresa tu email'
        {...email}
        required
      />

porque no tuviste que declarar el atributo name ?? yo lo he usado y la verdad que cuando no declaro el name no me reconoce el e.target.name

Para pensar: a mí y al profeosr ( y a ustedes, seguramente, también) se nos autocompletó el formulario a la primera que entramos a la ruta.

Muchos sitios pueden capturar esos datos (con fines potencialmente maliciosos) y otros más que tengamos en el autocompletado de Chrome, o el navegador que usemos.

Los invito a mirar esta página para ver y tomar consciencia de la cantidad de información que dejamos en nuestro paseo por la web: https://brax.me/geo/

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Next.js:

https://github.com/danyel117/petgram-platzi/tree/useinputvalue

Excelenteee 😃