How To Set Cookies In React

How to Set & Remove Cookie in React

Published on Aug 11, 2022

In this article, we are going to set and remove cookie in React.js. Let's get started:

Install Cookie Package & Config
Ready Cookie
Access Cookie
Remove Cookie
Higher-Order Component

Install Cookie Package & Config

We'll apply react-cookie package. It's very popular. Run the beneath control to install it:

              npm install react-cookie

Now we have to import theCookiesProvider component from thereact-cookie package and wrap your root app component with information technology.

index.js

              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 theuseCookies() claw from thereact-cookie parcel.

App.js

              import React from "react"; import { useCookies } from "react-cookie";  consign default part App() {   const [cookies, setCookie, removeCookie] = useCookies(["user"]);    role handleSetCookie() {     setCookie("user", "obydul", { path: '/' });   }    return (     <div className="App">       <h1>React Cookie</h1>       <button onClick={handleSetCookie}>Set Cookie</push>     </div>   ); }

Thecookies object contains all cookies. ThesetCookie() method is used to ready cookie.

We usedpath: "/" to access the cookie in all pages.

Access Cookie

We can retreive the user cookie uisng cookies.user. Here's the instance code:

App.js

              import React from "react"; import { useCookies } from "react-cookie";  export default function App() {   const [cookies, setCookie, removeCookie] = useCookies(["user"]);    role handleSetCookie() {     setCookie("user", "obydul", { path: '/' });   }    return (     <div className="App">       <h1>React Cookie</h1>       <p>{cookies.user}</p> {/* access user cookie */}       <button onClick={handleSetCookie}>Set up Cookie</button>     </div>   ); }

Remove Cookie

TheremoveCookie() method is used to remove cookie. Take a look at the case:

App.js

              import React from "react"; import { useCookies } from "react-cookie";  export default function App() {   const [cookies, setCookie, removeCookie] = useCookies(["user"]);    role 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</push button>     </div>   ); }

College-Social club Component

To set up and get cookies in course-based components, we need to usewithCookies(). Allow's take a await:

App.js

              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   };    country = {     user: this.props.cookies.become("user") || ""   };    handleSetCookie = () => {     const { cookies } = this.props;     cookies.ready("user", "obydul", { path: "/" }); // set the cookie     this.setState({ user: cookies.become("user") });   };    handleRemoveCookie = () => {     const { cookies } = this.props;     cookies.remove("user"); // remove the cookie     this.setState({ user: cookies.get("user") });   };    render() {     const { user } = this.state;     render (       <div className="App">         <h1>React Cookie</h1>         <p>{user}</p> {/* admission the cookie */}         <push onClick={this.handleSetCookie}>Set Cookie</button>       <push onClick={this.handleRemoveCookie}>Remove Cookie</button>       </div>     );   } }  export default withCookies(App);

That's it. Thanks for reading. ?