Formik

Formularios en React

Como vimos anteriormente, React propone la siguiente solución en su documentación para manejar un formulario, y para ‘lidiar’ el flujo de datos unidireccional que impone React en sí:

constructor(props) {
 super(props);
 this.state = {
  value: ""
 }
}

handleChange = (event) => {
 this.setState({ value: event.target.value })
}

render() {
 return (
  <input
   onChange={this.handleChange}
   value={this.state.value}
  />
 )
}

Cuando tenemos más de un campo, podemos usar el truco de Computed Properties (Característica de ES6) para usar el name del input:

constructor(props) {
 super(props);
 this.state = {
  thing: "",
  other: ""
 }
}

handleChange = (event) => {
 const field = event.target.name;
 this.setState({
   [field]: event.target.value
 })
}

render() {
 return (
  <div>
   <input 
    name="thing"
    onChange={this.handleChange} 
    value={this.state.thing} />
   
   <input 
    name="other"
    onChange={this.handleChange} 
    value={this.state.other} />
  </div>
 )
}

React no nos proporciona nada más para solucionar el resto de los desafíos que tienen los formularios generalmente, como:

• Validaciones y mensajes de error.

• Trackeo de cambios (Saber que campos fueron modificados o no).

• Manejar la sumisión del formulario.

• Mantener todo esto organizado, para que si tenemos muchos formularios en nuestra aplicación, todos se resuelvan de la misma forma.

Formik

Formik es una librería muy liviana que nos proporciona una forma sencilla de trabajar con formularios, y con los puntos mencionados anteriormente.

Formik nos proporciona un High Order Component llamado withFormik. Esto es una función que recibe un componente y devuelve otro componente.

En particular, este HoC se encarga de manejar el state de nuestro componente formulario, y nos proporciona las siguientes Props:

• values

• errors

• touched

• handleChange

• handleBlur

• handleSubmit

• isSubmitting

Internamente, Formik sigue utilizando la misma idea de guardar los distintos valores del formulario utilizando una ‘key’, pero además, utiliza la misma key para los errores y para trackear que campos fueron visitados (touched).

Esta es una versión reducida del handleChange interno de Formik:

handleChange = (event) => {
 const field = event.target.name;
 this.setState(prevState => ({
   values: {
     ...prevState.values,
     [field]: event.target.value
   }
 })
}

El uso de este HoC es muy simple, simplemente lo importamos de la librería, y le pasamos un objeto de configuración:

import React from 'react';
import { withFormik } from 'formik';

const enhancer = withFormik({
  // Transformamos las props externas a valores
  mapPropsToValues: props => { 
   return {
     email: props.initialEmail || ''
   };
  },
  // Agregamos nuestra funcion de validacion custom
  validate: (values, props) => { 
   const errors = {};
   if (!values.email) {
    errors.email = 'Required';
   } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
   ) {
    errors.email = 'Invalid email address';
   }
   return errors;
  },
  handleSubmit: values => { 
    // realizamos el submit
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
    }, 400);
  },
});
const MyForm = props => (
 <form onSubmit={props.handleSubmit}>   
    <div>
      <input  
        name="email"
        onChange={props.handleChange}  
        value={props.values.email} />   
      {props.errors.email && props.touched.email && props.errors.email}
    </div>
    <button type="submit">      
      Submit   
    </button> 
  </form>
);
export default enhancer(MyForm); 

Yup

Formik se integra muy bien con la librería de validación llamada Yup. Acá pueden encontrar un ejemplo del uso en un codesandbox.

Instalación de Formik

Para poder usar la librería se debe instalar como una dependencia del proyecto, esto la descarga a la carpeta node_modules y ademas anota la dependencia en el archivo package.json:

npm install formik --save
# or
yarn add formik

Practico

Vamos a completar un ejercicio para poder practicar estos conceptos. Puede copiarse todo el código base desde el archivo step6_App.js

• Primero van a tener que instalar la dependencia en su proyecto.

• Agregar el import de la librería al comienzo del archivo.

• Completar el componente UserForm utilizando el HoC withFormik. Cada input, label y error, se puede poner dentro de un div con la clase de css ‘input-field’.

• Tener en cuenta que van a tener que modificar el render de App para que en vez de dibujar directamente UserForm, dibuje el resultado de llamar al HoC con UserForm.

• Agregar validaciones para que ningún campo pueda ser vacío, y también validar el formato del email, y que se haya seleccionado un rol.

• Validar que el largo del país sea mayor a 3.

• Mostrar los errores de cada campo, se puede utilizar la clase de css ‘text-danger’.

• El botón debe estar deshabilitado si ningún campo fue modificado (utilizar la bandera recibida por props: dirty), y mientras se esté realizando el submit.

Las clases de css que pueden usar en este ejercicio, pueden copiarlas desde acá y pegarlas en App.css:

.form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-field {
  display: flex;
  flex-direction: column;
  max-width: 350px;
  text-align: center;
  margin: 10px
}

.text-danger {
  color:red
}