Hi,
I am working on the Contact Manager app using React Hooks and Context Api for state management.
I want to add the Date Time when I add the record of the user and also when I edit the existence record.
When I add a new user Date Time show in the added date column perfectly. But when I Edit the record Date shows like “Invalid Date” in the Updated records column.
Here is my Components.
AddUser.js
import React, { useState, useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import { v4 as uuid } from "uuid";
import { Link, useHistory } from "react-router-dom";
import { Form, FormGroup, Label, Input, Button } from "reactstrap";
export const AddUser = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const { addUser } = useContext(GlobalContext);
const history = useHistory();
const onSubmit = (e) => {
e.preventDefault();
const timestamp = Date.now();
const newUser = {
id: uuid(),
name,
email,
phone,
timestamp,
};
addUser(newUser);
history.push("/");
};
return (
<Form onSubmit={onSubmit}>
<FormGroup>
<Label>Name</Label>
<Input
type='text'
value={name}
onChange={(e) => setName(e.target.value)}
name='name'
placeholder='Enter user'
required
></Input>
<Input
type='email'
value={email}
onChange={(e) => setEmail(e.target.value)}
name='email'
placeholder='Enter email'
required
></Input>
<Input
type='tel'
value={phone}
onChange={(e) => setPhone(e.target.value)}
name='phone'
placeholder='Enter phone'
required
></Input>
</FormGroup>
<Button type='submit'>Submit</Button>
<Link to='/' className='btn btn-danger ml-2'>
Cancel
</Link>
</Form>
);
};
EditUser.js
/** @format */
import React, { useState, useContext, useEffect } from "react";
import { GlobalContext } from "../context/GlobalState";
import { Link, useHistory } from "react-router-dom";
import { Form, FormGroup, Label, Input, Button } from "reactstrap";
export const EditUser = (props) => {
const { editUser, users } = useContext(GlobalContext);
let [selectedUser, setSelectedUser] = useState({
id: "",
name: "",
email: "",
phone: "",
});
const history = useHistory();
const currentUserId = props.match.params.id;
useEffect(() => {
const userId = currentUserId;
const selectedUser = users.find((user) => user.id === userId);
setSelectedUser(selectedUser);
}, [currentUserId, users]);
const onChange = (e) => {
setSelectedUser({ ...selectedUser, [e.target.name]: e.target.value });
};
const onSubmit = (e) => {
e.preventDefault();
selectedUser = {
updatedtime: Date.now(),
};
console.log(selectedUser.updatedtime);
editUser(selectedUser);
history.push("/");
};
return (
<Form onSubmit={onSubmit}>
<FormGroup>
<Label>Name</Label>
<Input
type='text'
value={selectedUser.name}
onChange={onChange}
name='name'
placeholder='Enter user'
required
></Input>
<Input
type='email'
value={selectedUser.email}
onChange={onChange}
name='email'
placeholder='Enter email'
required
></Input>
<Input
type='tel'
value={selectedUser.phone}
onChange={onChange}
name='phone'
placeholder='Enter phone'
required
></Input>
</FormGroup>
<Button type='submit'>Edit Name</Button>
<Link to='/' className='btn btn-danger ml-2'>
Cancel
</Link>
</Form>
);
};
Userlist.js
import React, { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import { Link } from "react-router-dom";
import { Button, Table } from "reactstrap";
export const UserList = () => {
const { users, removeUser } = useContext(GlobalContext);
return (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Contact Number</th>
<th>Added time</th>
<th>Updated time</th>
</tr>
</thead>
{users.length > 0 ? (
<>
{users.map((user) => (
<tbody>
<tr>
<td>
<Link to={`/contact/${user.id}`}>{user.name}</Link>
</td>
<td>{user.email}</td>
<td>{user.phone}</td>
<td> {new Date(user.timestamp).toUTCString()}</td>
<td> {new Date(user.updatedtime).toUTCString()}</td>
<td>
{" "}
<div className='ml-auto'>
<Link
to={`/edit/${user.id}`}
color='warning'
className='btn btn-warning mr-1'
>
Edit
</Link>
<Button onClick={() => removeUser(user.id)} color='danger'>
Delete
</Button>
</div>
</td>
</tr>
</tbody>
))}
</>
) : (
<h4 className='text-center'>No Users</h4>
)}
</Table>
);
};
If someone knows what’s wrong then please let me know.thanks in advance