How to Set & Remove Cookie in React
In this article, we are going to set and remove cookie in React.js. Let’s get started:
Table of Contents
Install Cookie Package & Config
We’ll use react-cookie package. It’s very popular. Run the below command to install it:
npm install react-cookie
Now we have to import the CookiesProvider
component from the react-cookie
package and wrap your root app component with it.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CookiesProvider } from "react-cookie";
ReactDOM.render(
<CookiesProvider>
<App />
</CookiesProvider>,
document.getElementById('root')
);
Set Cookie
To set a cookie, we need to import the useCookies()
hook from the react-cookie
package.
import React from "react";
import { useCookies } from "react-cookie";
export default function App() {
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
function handleSetCookie() {
setCookie("user", "obydul", { path: '/' });
}
return (
<div className="App">
<h1>React Cookie</h1>
<button onClick={handleSetCookie}>Set Cookie</button>
</div>
);
}
The cookies
object contains all cookies. The setCookie()
method is used to set cookie.
We used path: "/"
to access the cookie in all pages.
Access Cookie
We can retreive the user cookie uisng cookies.user
. Here’s the example code:
import React from "react";
import { useCookies } from "react-cookie";
export default function App() {
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
function handleSetCookie() {
setCookie("user", "obydul", { path: '/' });
}
return (
<div className="App">
<h1>React Cookie</h1>
<p>{cookies.user}</p> {/* access user cookie */}
<button onClick={handleSetCookie}>Set Cookie</button>
</div>
);
}
Remove Cookie
The removeCookie()
method is used to remove cookie. Have a look at the example:
import React from "react";
import { useCookies } from "react-cookie";
export default function App() {
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
function handleSetCookie() {
setCookie("user", "obydul", { path: '/' });
}
function handleRemoveCookie() {
removeCookie("user");
}
return (
<div className="App">
<h1>React Cookie</h1>
<p>{cookies.user}</p> {/* access user cookie */}
<button onClick={handleSetCookie}>Set Cookie</button>
<button onClick={handleRemoveCookie}>Remove Cookie</button>
</div>
);
}
Higher-Order Component
To set and get cookies in class-based components, we need to use withCookies()
. Let’s take a look:
import React, { Component } from "react";
import { instanceOf } from "prop-types";
import { withCookies, Cookies } from "react-cookie";
class App extends Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
state = {
user: this.props.cookies.get("user") || ""
};
handleSetCookie = () => {
const { cookies } = this.props;
cookies.set("user", "obydul", { path: "/" }); // set the cookie
this.setState({ user: cookies.get("user") });
};
handleRemoveCookie = () => {
const { cookies } = this.props;
cookies.remove("user"); // remove the cookie
this.setState({ user: cookies.get("user") });
};
render() {
const { user } = this.state;
return (
<div className="App">
<h1>React Cookie</h1>
<p>{user}</p> {/* access the cookie */}
<button onClick={this.handleSetCookie}>Set Cookie</button>
<button onClick={this.handleRemoveCookie}>Remove Cookie</button>
</div>
);
}
}
export default withCookies(App);
That’s it. Thanks for reading. ?
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)