¿Qué es useState() y cómo se ha utilizado para validar los valores de entrada?

useState () es un gancho en ReactJs que permite que un componente funcional tenga un estado. Pasamos el estado inicial en esta función, y nos devuelve una variable y una función para actualizar ese estado.

• Tenemos que importar el gancho useState() del paquete de reacción.

  import  { useState } from 'react';

• Sintaxis para crear un estado usando el gancho useState():

  const [ state, updateState] = useState("Initial Value")

useState() devuelve una lista con dos elementos. el primero es el estado en sí, y el segundo es la función para actualizar este estado.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1:
Nombre de archivo App.js:

import React, { Component, useState } from "react";
const App = () =>   {
    
  const [name, updateName] = useState("kapil")
const handleUpdate = () => {
    
    updateName("Nikhil")
}
    return(
    <div >
      <button
        style = { {margin: 100 }}
        onClick = { () => { handleUpdate()} } >
        change Name
      </button>
      { name }
    </div>
    );
            
}
export default App;

Producción:

Ejemplo 2: La validación del valor de entrada en React permite que se muestre un mensaje de error si el usuario no ha llenado el formulario con el valor esperado. Hay muchas formas de validar el valor de entrada con React. 

Nombre de archivo App.js:

import React from 'react';
  
export default class App extends React.Component {
      
      state = {
        fields: {},
        errors: {}
    }
    //method to validate values 
    handleValidation = ()=>{
      let fields = this.state.fields;
      let errors = {};
      let formIsValid = true;
  
      //Name check if name is empty or not
      if(!fields["name"]){
         formIsValid = false;
         errors["name"] = "Cannot be empty";
      }
        //name should not contain special char
      if(typeof fields["name"] !== "undefined"){
         if(!fields["name"].match(/^[a-zA-Z]+$/)){
            formIsValid = false;
            errors["name"] = "Only letters";
         }        
      }
   
      //Email should not be empty
      if(!fields["email"]){
         formIsValid = false;
         errors["email"] = "Cannot be empty";
      }
        //validating email
      if(typeof fields["email"] !== "undefined"){
         let lastAtPos = fields["email"].lastIndexOf('@');
         let lastDotPos = fields["email"].lastIndexOf('.');
  
         if (!(lastAtPos < lastDotPos && lastAtPos > 0
         && fields["email"].indexOf('@@') == -1 && 
         lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
            formIsValid = false;
            errors["email"] = "Email is not valid";
          }
     }  
  
     this.setState({errors: errors});
     return formIsValid;
 }
  
    //after submit form it will be called
  handleSubmit = (e) =>{
  e.preventDefault();
    if(this.handleValidation())
      alert("form submitted successfully")
  }
  
    //updating the field value
  handleUpdate(field, e){         
    let fields = this.state.fields;
    fields[field] = e.target.value;        
    this.setState({fields});
}
  
  
   
    render(){
      return (
          <div style = {{margin:200}}>           
             <form  onSubmit= {this.handleSubmit.bind(this)}>
                 <input  type="text"  placeholder="Name" 
                 onChange={this.handleUpdate.bind(this, "name")} 
                 value={this.state.fields["name"]}/>
                    <span style={{color: "red"}}>
                    {this.state.errors["name"]}</span>
                    <br/>
                 <input type="text" placeholder="Email" 
                 onChange={this.handleUpdate.bind(this, "email")} 
                 value={this.state.fields["email"]}/>
                    <span style={{color: "red"}}>
                    {this.state.errors["email"]}</span>
                    <br/>
                 <button type = "submit">click</button>
      
            </form>
          </div>
    )
  }
}

Producción: