import React, { useState, useEffect } from 'react';
import './[Link]';
import { EmployeeData } from './EmployeeData';
function App() {
const [data, setData] = useState([]);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [name, setName] = useState('');
const [id, setId] = useState(null); // Track the id of the item being edited
useEffect(() => {
setData(EmployeeData);
}, []);
const handleEdit = (id) => {
const item = [Link](item => [Link] === id);
setFirstName([Link]);
setLastName([Link]);
setName([Link]);
setId([Link]);
};
const handleDelete = (id) => {
if (id > 0) {
if ([Link]('Are you sure to delete this item?')) {
const updatedData = [Link](item => [Link] !== id);
setData(updatedData);
}
}
};
const handleSave = () => {
if (id === null) {
// Add new item
const newId = [Link] ? data[[Link] - 1].id + 1 : 1;
const newData = {
id: newId,
firstName: firstName,
lastName: lastName,
name: name
};
setData([...data, newData]);
} else {
// Update existing item
const updatedData = [Link](item =>
[Link] === id ? { id, firstName, lastName, name } : item
);
setData(updatedData);
}
handleClear();
};
const handleClear = () => {
setFirstName('');
setLastName('');
setName('');
setId(null); // Clear the id to indicate no item is being edited
};
return (
<div className="App">
<div style={{ display: 'flex', justifyContent: 'center', flexDirection:
'column', alignItems: 'center' }}>
<div>
<label>
First Name:
<input type="text" placeholder="Enter First name" value={firstName}
onChange={(e) => setFirstName([Link])} />
</label>
</div>
<div>
<label>
Last Name:
<input type="text" placeholder="Enter Last name" value={lastName}
onChange={(e) => setLastName([Link])} />
</label>
</div>
<div>
<label>
Name:
<input type="text" placeholder="Enter name" value={name} onChange={(e)
=> setName([Link])} />
</label>
</div>
<div>
<button className="btn btn-primary"
onClick={handleSave}>Save</button>
<button className="btn btn-danger" onClick={handleClear}>Clear</button>
</div>
</div>
<table className="table table-hover">
<thead>
<tr>
<th>Sr. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{[Link]((item, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>
<button className="btn btn-primary" onClick={() =>
handleEdit([Link])}>Edit</button>
<button className="btn btn-danger" onClick={() =>
handleDelete([Link])}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;
