How to set cookies in ReactJS?

In this chapter, we are going to see how to set, remove and retrieve cookies in a React application.
Cookies are the data stored in the form of key-value pairs that are used to store information about the user on their computer by the websites that the users browse and use it to verify them.
To set or remove the cookies, we are going to use a third-party dependency of react-cookie.
npm install react-cookie
Or,
yarn add react-cookie
Npm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.
In this example, we will build a React application that takes the username and password from the user and stores it as a cookie in the user’s computer.
Firstly, wrap the index.js or the root app component of your application with the CookiesProvider component from the react-cookie package.
After that use the useCookies hook provided by it which has a syntax of −
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);
Cookies: Javascript object with all of the user’s cookies.
Cookies: Javascript object with all of the user’s cookies.
setCookie: Function to set the cookies.
setCookie: Function to set the cookies.
removeCookie: Function to remove the cookies.
removeCookie: Function to remove the cookies.
index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";

ReactDOM.render(
   <CookiesProvider>
      <App />
   </CookiesProvider>,
   document.getElementById('root')
);
App.jsx
import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

const App = () => {
   const [name, setName] = useState('');
   const [pwd, setPwd] = useState('');
   const [cookies, setCookie] = useCookies(['user']);

   const handle = () => {
      setCookie('Name', name, { path: '/' });
      setCookie('Password', pwd, { path: '/' });
   };
   return (
      <div className="App">
      <h1>Name of the user:</h1>
      <input
         placeholder="name"
         value={name}
         onChange={(e) => setName(e.target.value)}
      />
      <h1>Password of the user:</h1>
      <input
         type="password"
         placeholder="name"
         value={pwd}
         onChange={(e) => setPwd(e.target.value)}
      />
      <div>
         <button onClick={handle}>Set Cookie</button>
      </div>
   </div>
   );
};
export default App;
In the above example, when the Set-Cookie button is clicked then the handle function is executed which will set the cookies for the user. The path:'/' signifies that the cookie is available for all the pages of the website.
This will produce the following result.
After the cookies have been set, we can access them by writing cookies.{cookies key name}
App.jsx
import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

const App = () => {
   const [name, setName] = useState('');
   const [pwd, setPwd] = useState('');
   const [cookies, setCookie] = useCookies(['user']);

   const handle = () => {
      setCookie('Name', name, { path: '/' });
      setCookie('Password', pwd, { path: '/' });
   };
   return (
      <div className="App">
      <h1>Name of the user:</h1>
      <input
         placeholder="Name"
         value={name}
         onChange={(e) => setName(e.target.value)}
      />
      <h1>Password of the user:</h1>
      <input
         type="password"
         placeholder="Password"
         value={pwd}
         onChange={(e) => setPwd(e.target.value)}
      />
      <div>
      <button onClick={handle}>Set Cookie</button>{' '}
      </div>
      <br />
      {cookies.Name && (
      <div>
         Name: <p>{cookies.Name}</p>
      </div>
      )}
      {cookies.Password && (
      <div>
         Password: <p>{cookies.Password}</p>
      </div>
      )}
      </div>
   );
};
export default App;
In the above example, when the Set Cookie button and the cookies are set, the value of these cookies will be displayed accordingly.
This will produce the following result.