How to store object In Cookie in React using Hooks

You can save the cookie in document.cookie. But you need to save the data as a string. You could parse the whole object with JSON.parse, or the more elegant way is to use the specific attributes.

Cookies

But be aware that it is not save to store passwords in cookies.

Try this:

import React, { useState } from 'react';
import './Login.css';

const Login = () => {
    const [data, setData] = useState('')

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        setData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        document.cookie = `email=${data.email}`; 
        document.cookie = `username=${data.username}`; 
        document.cookie = `password=${data.password}`;  
    }

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-4'>
                    <div className='main'>
                        <form onSubmit={handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="email">Email address</label>
                                <input type="email" className="form-control" name='email' id="email" onChange={handleChange}></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="username">Username</label>
                                <input type="text" className="form-control" name='username' id="username" onChange={handleChange}></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" name='password' id="password" onChange={handleChange}></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login