89 lines
1.8 KiB
JavaScript
89 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import array from './array';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
|
|
export default function Home() {
|
|
|
|
let history = useNavigate()
|
|
|
|
// You may skip this part if you're
|
|
// using react-context api or redux
|
|
function setID(id,name,age){
|
|
localStorage.setItem('id', id);
|
|
localStorage.setItem('Name', name);
|
|
localStorage.setItem('Age', age);
|
|
}
|
|
|
|
// Deleted function - functionality
|
|
// for deleting the entry
|
|
function deleted(id){
|
|
|
|
var index = array.map(function(e) { return e.id; }).indexOf(id);
|
|
|
|
// deleting the entry with index
|
|
array.splice(index,1)
|
|
|
|
// We need to re-render the page for getting
|
|
// the results so redirect to same page.
|
|
history('/')
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Age</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{/* Mapping though every element in the array
|
|
and showing the data in the form of table */}
|
|
{array.map((item,key) => {
|
|
return(
|
|
<tr
|
|
key={key}
|
|
>
|
|
<td>{item.Name}</td>
|
|
<td>{item.Age}</td>
|
|
{/* getting theid,name, and age for storing these
|
|
value in the jsx with onclick event */}
|
|
<td><Link
|
|
to={`/edit`}
|
|
>
|
|
<button
|
|
onClick={(e) =>
|
|
setID(item.id,item.Name,item.Age)}
|
|
>
|
|
Update
|
|
</button>
|
|
</Link>
|
|
</td>
|
|
{/* Using thr deleted function passing
|
|
the id of an entry */}
|
|
<td>
|
|
<button
|
|
onClick={e => deleted(item.id)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
)})}
|
|
</tbody>
|
|
</table>
|
|
{/* button for redirecting to create page for
|
|
insertion of values */}
|
|
<Link
|
|
to='/create'
|
|
>
|
|
<button
|
|
>
|
|
Create
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|