unable to store array of objects in local storage, hope someone can help.
i have used .push to push data into an array but all it does is updates the array, idk whats wrong.
import React, { useState, useEffect } from 'react'
export default function Home() {
const [employee, setEmployee] = useState({
fname: "",
lname:"",
dob: "",
designation: "",
experience: "",
});
const handleChange = (e) => {
const {name, value} = e.target;
setEmployee({...employee, [name]: value });
}
const handleSubmit = (e) => {
e.preventDefault();
var employeeArray = JSON.parse(localStorage.getItem(employeeArray)) ? JSON.parse(localStorage.getItem(employeeArray)) : [];
employeeArray.push(employee);
localStorage.setItem('employeeArray', JSON.stringify(employeeArray));
}
useEffect(() => {
const employeeList = JSON.parse(localStorage.getItem('employee'));
if(employeeList){
setEmployee(employeeList);
}
}, [])
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name='fname' onChange={handleChange} placeholder='First Name' />
<input type="text" name='lname' onChange={handleChange} placeholder='Last Name' />
<input type="date" name='dob' onChange={handleChange} placeholder='DOB' />
<input type="text" name='designation' onChange={handleChange} placeholder='Designation' />
<input type="text" name='experience' onChange={handleChange} placeholder='Experience' />
<button type="submit">submit</button>
</form>
<div>
{ employee.fname ? employee.fname : "NO DATA" }
</div>
</div>
);
}
