77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { Button,Table } from 'react-bootstrap'
|
|
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import array from './array';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
|
|
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 style={{margin:'10rem'}}>
|
|
<Table striped bordered hover size="sm">
|
|
<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) => {
|
|
return(
|
|
<tr>
|
|
<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)} variant="info">
|
|
Update</Button></Link></td>
|
|
|
|
{/* Using thr deleted function passing
|
|
the id of an entry */}
|
|
<td><Button onClick={e => deleted(item.id)}
|
|
variant="danger">Delete</Button></td>
|
|
</tr>
|
|
)})}
|
|
</tbody>
|
|
</Table>
|
|
|
|
{/* Button for redirecting to create page for
|
|
insertion of values */}
|
|
<Link className="d-grid gap-2" to='/create'>
|
|
<Button variant="warning" size="lg">Create</Button>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|