¿Cómo configurar una cookie en ReactJS?

Las cookies son una parte importante de una aplicación porque las cookies se utilizan para establecer el valor en una forma de clave-valor que se puede configurar en el almacenamiento del navegador y se utiliza más para identificar al usuario actual. El siguiente ejemplo muestra cómo configurar la cookie en la aplicación ReactJS, aquí hemos tomado como clave el nombre de usuario, que se configura en la cookie con su valor.

Creando la aplicación React:

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

npx create-react-app setcookiedemo

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

cd setcookiedemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado en el que hemos escrito nuestro código para establecer cookies en localStorage con una interfaz de usuario básica.

import React, { useState } from "react";
  
const App = () => {
  
  const [message, setMessage] = useState('')
    
  const setCookieFunction = (value) => {
    
    localStorage.setItem('username', value)
  
    setMessage('Username set as cookie!!')
  }
  
  return (
    <div style={{
      marginLeft: '200px',
    }}>
      <pre>
        <h2>Setting Cookie in ReactJS</h2>
        <span>Enter User Name: </span><input type="text" 
        onChange={(e) => setCookieFunction(e.target.value)}></input> <br />
        <span style={{
          fontWeight: 'bold',
          color: 'red',
        }}>{message}</span>
      </pre>
    </div>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

1. El siguiente será el resultado si el usuario ingresa un nombre de usuario que se establece como una cookie como se muestra a continuación:

   

2. Ahora vaya a su Almacenamiento local del navegador inspeccionando la página del navegador, allí puede ver nuestra cookie que está configurada con key=’username’ y value=’gouravhammad’ como se muestra a continuación: