React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only.

Step 1: Add the react-cookie in your project  

npm install react-cookie

Step2: Add the following code in index.js

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

Step3: Add the following code in your component

  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={name}
              onChange={(e) => setPwd(e.target.value)}
          />
          <div>
               <button onClick={handle}>Set Cookie</button>
          </div>
       </div>
    );
  };
  export default App;
  

Step4: Retrieving cookies

  Name: <p>{cookies.Name}</p>
  Password: <p>{cookies.Password}</p>