82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Button, Form } from 'react-bootstrap';
|
|
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import array from './array';
|
|
import { Link} from 'react-router-dom';
|
|
import {useNavigate} from 'react-router-dom';
|
|
|
|
|
|
function Edit() {
|
|
|
|
// Here usestate has been used in order
|
|
// to set and get values from the jsx
|
|
const [name, setname] = useState('');
|
|
const [age, setage] = useState('');
|
|
const[id,setid] = useState('');
|
|
|
|
// used for navigation with logic in javascript
|
|
let history = useNavigate()
|
|
|
|
// getting an index of an entry with an id
|
|
var index = array.map(function(e) { return e.id; }).indexOf(id);
|
|
|
|
// function for handling the edit and
|
|
// pushing changes of editing/updating
|
|
const handelSubmit = (e) =>{
|
|
e.preventDefault(); // preventing from reload
|
|
|
|
let a = array[index] // getting an index of an array
|
|
|
|
// putting the value from the input textfield and
|
|
// replacing it from existing for updation
|
|
a.Name = name
|
|
a.Age = age
|
|
|
|
// redirecting to main page
|
|
history('/')
|
|
}
|
|
|
|
|
|
// Useeffect take care that page will be rendered only once
|
|
useEffect(() => {
|
|
setname(localStorage.getItem('Name'))
|
|
setage(localStorage.getItem('Age'))
|
|
setid(localStorage.getItem('id'))
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<Form className="d-grid gap-2" style={{margin:'15rem'}}>
|
|
|
|
{/* setting a name from the input textfiled */}
|
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
<Form.Control value={name}
|
|
onChange={e => setname(e.target.value)}
|
|
type="text" placeholder="Enter Name" />
|
|
</Form.Group>
|
|
|
|
{/* setting a age from the input textfiled */}
|
|
<Form.Group className="mb-3" controlId="formBasicPassword">
|
|
<Form.Control value={age}
|
|
onChange={e => setage(e.target.value)}
|
|
type="text" placeholder="Age" />
|
|
</Form.Group>
|
|
|
|
{/* Hadinling an onclick event running an edit logic */}
|
|
<Button
|
|
onClick={e => handelSubmit(e)}
|
|
variant="primary" type="submit" size="lg">
|
|
Update
|
|
</Button>
|
|
|
|
{/* Redirecting to main page after editing */}
|
|
<Link className="d-grid gap-2" to='/'>
|
|
<Button variant="warning" size="lg">Home</Button>
|
|
</Link>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Edit
|