edit added

db.json

 {
   "students": [
     {
-      "id": 2623,
-      "mark": "34",
-      "text": "hjhjhj"
+      "text": "ajmals",
+      "mark": "67",
+      "id": 5262
     },
     {
-      "id": 5545,
-      "mark": "65",
-      "text": "saas"
-    },
-    {
-      "id": 8802,
-      "mark": "89",
-      "text": "sss"
-    },
-    {
-      "id": 406,
-      "mark": "11",
-      "text": "arun"
-    },
-    {
-      "id": 8028,
-      "mark": "13",
-      "text": "aju"
-    },
-    {
-      "id": 2585,
-      "mark": "89",
-      "text": "prem"
-    },
-    {
-      "text": "Banu",
-      "mark": "100",
-      "id": 8499
-    },
-    {
-      "id": 2483,
-      "mark": "5",
-      "text": "dfdfdf"
-    },
-    {
-      "id": 4342,
-      "mark": "3",
-      "text": "dsdsd"
-    },
-    {
-      "id": 3832,
-      "mark": "909",
-      "text": "cath"
+      "id": 6758,
+      "mark": "67",
+      "text": "bala"
     }
   ]
 }
\ No newline at end of file

src/App.js

@@ -46,7 +46,7 @@ function App() {
       <Header />
       <AddStudent addStudent={addStudent} />
       {studentsData.map((data, index) => (
-        <Students key={data.id} index={index} id={data.id} mark={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
+        <Students key={data.id} index={index} id={data.id} marks={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
       ))}
     </div>
 

src/components/Students.js

@@ -4,45 +4,83 @@ import { MdOutlineModeEditOutline } from 'react-icons/md'
 import { Modal, Button } from 'react-bootstrap';
 
 
-const Students = ({ mark, children, onDeleteStudent, id, index, editStudent }) => {
+const Students = ({ children, marks, onDeleteStudent, id, index }) => {
 
     const [show, setShow] = useState(false);
+    const [deleteShow, setDeleteShow] = useState(false);
+
+    const handleDeleteOpen = () => setDeleteShow(true);
+    const handleDeleteClose = () => setDeleteShow(false);
+
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
 
+    const [text, setText] = useState(children);
+    const [mark, setMark] = useState(marks);
+
+    const onEditStudent = async (id) => {
+        let item = { text, mark }
+        const response = await fetch(`http://localhost:5000/students/${id}`, {
+            method: 'PUT',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(item)
+        })
+        const data = await response.json()
+        console.log(data);
+    }
+
     return (
         <>
             <div className='student'>
                 <div>{index + 1}</div>
-                <div>{children}</div>
+                <div>{text}</div>
                 <div>{mark}</div>
                 <div><small className={`${mark >= 35 ? 'pass' : 'fail'}`}>({mark >= 35 ? 'P' : 'F'})</small></div>
                 <div style={{ display: 'flex' }}>
                     <div><MdOutlineModeEditOutline onClick={handleShow} /></div>
-                    <div style={{ marginLeft: '10px' }}><ImBin onClick={() => onDeleteStudent(id)} /></div>
+                    <div style={{ marginLeft: '10px' }}><ImBin onClick={handleDeleteOpen} /></div>
                 </div>
             </div>
-            <form className='add-form'>
-                <Modal show={show} onHide={handleClose} centered>
-                    <Modal.Header closeButton>
-                        <Modal.Title>Edit Student Data</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <div className='form-ctrl'>
-                            <input type='text' value={children} />
-                            <input type='text' value={mark} />
-                        </div>
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <Button variant="secondary" onClick={handleClose}>
-                            Close
-                        </Button>
-                        <Button variant="primary" type='submit' onClick={handleClose}>
-                            Save Changes
-                        </Button>
-                    </Modal.Footer>
-                </Modal>
-            </form>
+            {/* Delete Student */}
+            <Modal show={deleteShow} onHide={handleDeleteClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Are you sure you want to delete? <br /> <b>{text}</b></Modal.Title>
+                </Modal.Header>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleDeleteClose}>
+                        Cancel
+                    </Button>
+                    <Button variant="primary" type='submit' onClick={() => onDeleteStudent(id)}>
+                        Delete
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
+            {/* Edit Student */}
+            <Modal show={show} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Edit Student Data</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <div className='form-ctrl'>
+                        <label>Name</label>
+                        <input type='text' value={text} onChange={(e) => setText(e.target.value)} />
+                        <label>Mark</label>
+                        <input type='text' value={mark} onChange={(e) => setMark(e.target.value)} />
+                    </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button variant="primary" type='submit' onClick={() => onEditStudent(id)}>
+                        Save Changes
+                    </Button>
+                </Modal.Footer>
+            </Modal>
         </>
     )
 }