How to set cookies in ReactJS?

ReactJS Web Development Front End Technology

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.

Installing the module

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.

Setting up cookies

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 −

Syntax

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

Parameter

Cookies: JavaScript object with all of the user’s cookies.
setCookie: Function to set the cookies.
removeCookie: Function to remove the cookies.

Example

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.

Output

This will produce the following result.

Retrieving cookies

After the cookies have been set, we can access them by writing cookies.{cookies key name}

Example

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.

Output

This will produce the following result.

Rahul Bansal

Updated on: 10-Sep-2023

30K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started