correctins

db.json

 {
   "students": [
     {
-      "text": "aruny",
-      "mark": "100",
-      "id": 1
+      "mark": "45",
+      "text": "1",
+      "id": 4
     },
     {
-      "text": "partha",
-      "mark": "997",
-      "id": 2
+      "mark": "90",
+      "text": "2",
+      "id": 5
+    },
+    {
+      "mark": "95",
+      "text": "3",
+      "id": 6
     }
   ]
 }
\ No newline at end of file

src/App.js

@@ -8,10 +8,6 @@ export const valueContext = React.createContext();
 function App() {
 
   const [studentsData, setStudentsData] = useState([]);
-  const [text, setText] = useState();
-  const [mark, setMark] = useState();
-  const [editId, setEdit] = useState();
-  const [editMode, setEditMode] = useState(false);
 
   const fetchStudents = async () => {
     const response = await fetch('http://localhost:5000/students');
@@ -25,7 +21,7 @@ function App() {
       setStudentsData(data);
     }
     setStudents();
-  }, [editMode])
+  }, [])
 
 
   const addStudent = async (data) => {
@@ -41,35 +37,14 @@ function App() {
     }
   }
 
-  const updateStudent = 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();
-  }
-
-  const handleEditChange = (id, text, mark) => {
-    setEditMode(true);
-    setEdit(id);
-    setMark(mark);
-    setText(text);
-  };
-
   return (
     <div className="c-container">
-      <valueContext.Provider value="Students Mark List
-">
+      <valueContext.Provider value="Students Mark List">
         <Header />
       </valueContext.Provider>
-      <Form editId={editId} setEdit={setEdit} text={text} setText={setText} mark={mark} setMark={setMark} onAdd={addStudent} onEdit={updateStudent} editMode={editMode} />
+      <Form onAdd={addStudent}/>
       {studentsData.map((data, index) => (
-        <Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent} handleEditChange={handleEditChange}>{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/Form.js

-import React from 'react';
-import PropTypes from 'prop-types';
-import '../../src/index.css'
+import React, { useState } from 'react';
 
-export const Form = ({ onAdd, editId, text, setText, mark, setMark, onEdit, editMode }) => {
+const Form = ({ onAdd }) => {
+
+    const [text, setText] = useState();
+    const [mark, setMark] = useState();
+    const [editId, setEdit] = useState();
+    const [editMode, setEditMode] = useState(false);
 
     const handleSubmit = (e) => {
         e.preventDefault()
@@ -24,8 +27,28 @@ export const Form = ({ onAdd, editId, text, setText, mark, setMark, onEdit, edit
         setMark('');
     }
 
+    const handleEditChange = (id, children, marks) => {
+        setEditMode(true);
+        setEdit(id);
+        setMark(marks);
+        setText(children);
+    };
+
+    const updateStudent = 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();
+    }
+
     return (
-        <form className='add-form' onSubmit={!editMode ? handleSubmit : () => onEdit(editId)}>
+        <form className='add-form' onSubmit={!editMode ? handleSubmit : () => updateStudent(editId)}>
             <div className='form-ctrl'>
                 <label>Student Name</label>
                 <input type='text' placeholder='Name' value={text} onChange={(e) => setText(e.target.value)} />
@@ -35,22 +58,10 @@ export const Form = ({ onAdd, editId, text, setText, mark, setMark, onEdit, edit
                 <input type='number' placeholder='Mark' value={mark} onChange={(e) => setMark(e.target.value)} />
             </div>
             {!editMode ?
-                < input type='submit' value='Save' className='button button-block' ></input> :
-                < input type='submit' value='Update' className='button button-block' ></input>}
-        </form >
+                <input type='submit' value='Save' className='button button-block'></input> :
+                <input type='submit' value='Update' className='button button-block'></input>}
+        </form>
     )
 }
 
-Form.propTypes = {
-    editMode: PropTypes.bool,
-    handleSubmit: PropTypes.func,
-    onEdit: PropTypes.func,
-    editId: PropTypes.string,
-    text: PropTypes.string,
-    mark: PropTypes.string,
-    // setText: PropTypes.func,
-    // setMark: PropTypes.func,
-    onAdd: PropTypes.func
-};
-
 export default Form

src/components/Students.js

@@ -11,7 +11,7 @@ const Students = ({ children, marks, id, index, onDelete, handleEditChange }) =>
             <div><small className={`${marks >= 35 ? 'pass' : 'fail'}`}>({marks >= 35 ? 'P' : 'F'})</small></div>
             <div style={{ display: 'flex' }}>
                 <div><MdOutlineModeEditOutline onClick={() => handleEditChange(id, children, marks)} /></div>
-                <div style={{ marginLeft: '10px' }}><ImBin onClick={() => (onDelete(id))}/></div>
+                <div style={{ marginLeft: '10px' }}><ImBin onClick={() => (onDelete(id))} /></div>
             </div>
         </div>
     )