corrections

db.json

 {
   "students": [
     {
-      "text": "ajmals",
-      "mark": "67",
-      "id": 5262
+      "id": 1441,
+      "mark": "1212",
+      "text": "ghgh"
+    },
+    {
+      "id": 4244,
+      "mark": "56",
+      "text": "rrr"
+    },
+    {
+      "id": 1559,
+      "mark": "56",
+      "text": "ww"
+    },
+    {
+      "id": 1749,
+      "mark": "56",
+      "text": "aru"
     },
     {
-      "id": 6758,
+      "id": 6950,
       "mark": "67",
-      "text": "bala"
+      "text": "mam"
     }
   ]
 }
\ No newline at end of file

src/App.js

 import { useState, useEffect } from 'react';
 import Students from './components/Students';
 import Header from './components/Header'
-import AddStudent from './components/AddStudent';
+import Form from './components/Form';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
 
   const [studentsData, setStudentsData] = useState([]);
+  const [text, setText] = useState();
+  const [mark, setMark] = useState();
 
   const fetchStudents = async () => {
     const response = await fetch('http://localhost:5000/students');
@@ -20,16 +22,9 @@ function App() {
       setStudentsData(data);
     }
     setStudents();
-  })
+  }, [])
 
   const addStudent = async (data) => {
-    if (!data.text) {
-      alert('Please Enter Student Name');
-      return;
-    } else if (!data.mark) {
-      alert('Please Enter Mark')
-      return;
-    }
     const response = await fetch('http://localhost:5000/students', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(data) });
     const datas = await response.json();
     setStudentsData([...studentsData, datas]);
@@ -41,12 +36,26 @@ function App() {
     setStudentsData(studentsData.filter((data) => data.id !== id))
   }
 
+  const editStudent = 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()
+    setStudentsData(data);
+  }
+
   return (
     <div className="c-container">
       <Header />
-      <AddStudent addStudent={addStudent} />
+      <Form onAdd={addStudent} text={text} setText={setText} mark={mark} setMark={setMark}/>
       {studentsData.map((data, index) => (
-        <Students key={data.id} index={index} id={data.id} marks={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
+        <Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent}>{data.text}</Students>
       ))}
     </div>
 

src/components/AddStudent.js → src/components/Form.js

-import React, { useState } from 'react';
 
-const AddStudent = ({ addStudent }) => {
+const Form = ({ onAdd, text, setText, mark, setMark }) => {
 
-    const [name, setName] = useState('');
-    const [mark, setMark] = useState('');
-
-    const onAddStudent = (e) => {
+    const handleSubmit = (e) => {
         e.preventDefault()
 
-        addStudent({
-            id: Math.floor(Math.random() * 10000),
+        if (!text) {
+            alert('Please Enter Student Name');
+            return;
+        } else if (!mark) {
+            alert('Please Enter Mark')
+            return;
+        }
+
+        onAdd({
             mark: mark,
-            text: name,
+            text: text,
         });
 
-        setName('');
+        setText('');
         setMark('');
     }
 
     return (
-        <form className='add-form' onSubmit={onAddStudent}>
+        <form className='add-form' onSubmit={handleSubmit}>
             <div className='form-ctrl'>
                 <label>Student Name</label>
-                <input type='text' placeholder='Name' value={name} onChange={(e) => setName(e.target.value)} />
+                <input type='text' placeholder='Name' value={text} onChange={(e) => setText(e.target.value)} />
             </div>
             <div className='form-ctrl'>
                 <label>Mark</label>
@@ -33,4 +36,4 @@ const AddStudent = ({ addStudent }) => {
     )
 }
 
-export default AddStudent
+export default Form

src/components/Students.js

-import { useState } from 'react'
 import { ImBin } from 'react-icons/im'
 import { MdOutlineModeEditOutline } from 'react-icons/md'
-import { Modal, Button } from 'react-bootstrap';
 
-
-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);
-    }
+const Students = ({ children, marks, id, index, onDelete }) => {
 
     return (
-        <>
-            <div className='student'>
-                <div>{index + 1}</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={handleDeleteOpen} /></div>
-                </div>
+        <div className='student'>
+            <div>{index + 1}</div>
+            <div>{children}</div>
+            <div>{marks}</div>
+            <div><small className={`${marks >= 35 ? 'pass' : 'fail'}`}>({marks >= 35 ? 'P' : 'F'})</small></div>
+            <div style={{ display: 'flex' }}>
+                <div><MdOutlineModeEditOutline /></div>
+                <div style={{ marginLeft: '10px' }}><ImBin onClick={() => onDelete(id)} /></div>
             </div>
-            {/* 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>
-        </>
+        </div>
     )
 }