form combined

db.json

 {
   "students": [
     {
-      "id": 1441,
-      "mark": "1212",
-      "text": "ghgh"
+      "text": "Arun S",
+      "mark": "98",
+      "id": 1
     },
     {
-      "id": 4244,
-      "mark": "56",
-      "text": "rrr"
+      "text": "Partha P",
+      "mark": "99",
+      "id": 2
     },
     {
-      "id": 1559,
-      "mark": "56",
-      "text": "ww"
-    },
-    {
-      "id": 1749,
-      "mark": "56",
-      "text": "aru"
-    },
-    {
-      "id": 6950,
-      "mark": "67",
-      "text": "mam"
+      "text": "Ajmal aju",
+      "mark": "2434",
+      "id": 3
     }
   ]
 }
\ No newline at end of file

package.json

@@ -9,7 +9,6 @@
     "bootstrap": "^5.1.3",
     "json-server": "^0.17.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",

src/App.js

@@ -2,13 +2,14 @@ import { useState, useEffect } from 'react';
 import Students from './components/Students';
 import Header from './components/Header'
 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 [editId, setEdit] = useState();
+  const [editMode, setEditMode] = useState(false);
 
   const fetchStudents = async () => {
     const response = await fetch('http://localhost:5000/students');
@@ -22,13 +23,13 @@ function App() {
       setStudentsData(data);
     }
     setStudents();
-  }, [])
+  }, [editMode])
+
 
   const addStudent = async (data) => {
     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]);
-
   };
 
   const deleteStudent = async (id) => {
@@ -36,7 +37,7 @@ function App() {
     setStudentsData(studentsData.filter((data) => data.id !== id))
   }
 
-  const editStudent = async (id) => {
+  const updateStudent = async (id) => {
     let item = { text, mark }
     const response = await fetch(`http://localhost:5000/students/${id}`, {
       method: 'PUT',
@@ -47,18 +48,23 @@ function App() {
       body: JSON.stringify(item)
     })
     const data = await response.json()
-    setStudentsData(data);
   }
 
+  const handleEditChange = (id, text, mark) => {
+    setEditMode(true);
+    setEdit(id);
+    setMark(mark);
+    setText(text);
+  };
+
   return (
     <div className="c-container">
       <Header />
-      <Form onAdd={addStudent} text={text} setText={setText} mark={mark} setMark={setMark}/>
+      <Form editId={editId} setEdit={setEdit} text={text} setText={setText} mark={mark} setMark={setMark} onAdd={addStudent} onEdit={updateStudent} editMode={editMode}/>
       {studentsData.map((data, index) => (
-        <Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent}>{data.text}</Students>
+        <Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent} handleEditChange={handleEditChange}>{data.text}</Students>
       ))}
     </div>
-
   );
 }
 

src/components/Form.js

-
-const Form = ({ onAdd, text, setText, mark, setMark }) => {
+const Form = ({ onAdd, editId, text, setText, mark, setMark, onEdit, editMode }) => {
 
     const handleSubmit = (e) => {
         e.preventDefault()
@@ -22,7 +21,7 @@ const Form = ({ onAdd, text, setText, mark, setMark }) => {
     }
 
     return (
-        <form className='add-form' onSubmit={handleSubmit}>
+        <form className='add-form' onSubmit={!editMode ? handleSubmit : () => onEdit(editId)}>
             <div className='form-ctrl'>
                 <label>Student Name</label>
                 <input type='text' placeholder='Name' value={text} onChange={(e) => setText(e.target.value)} />
@@ -31,8 +30,10 @@ const Form = ({ onAdd, text, setText, mark, setMark }) => {
                 <label>Mark</label>
                 <input type='number' placeholder='Mark' value={mark} onChange={(e) => setMark(e.target.value)} />
             </div>
-            <input type='submit' value='Save' className='button button-block' />
-        </form>
+            {!editMode ?
+                < input type='submit' value='Save' className='button button-block' ></input> :
+                < input type='submit' value='Update' className='button button-block' ></input>}
+        </form >
     )
 }
 

src/components/Students.js

 import { ImBin } from 'react-icons/im'
 import { MdOutlineModeEditOutline } from 'react-icons/md'
 
-const Students = ({ children, marks, id, index, onDelete }) => {
+const Students = ({ children, marks, id, index, onDelete, handleEditChange }) => {
 
     return (
         <div className='student'>
@@ -10,8 +10,8 @@ const Students = ({ children, marks, id, index, onDelete }) => {
             <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><MdOutlineModeEditOutline onClick={() => handleEditChange(id, children, marks)} /></div>
+                <div style={{ marginLeft: '10px' }}><ImBin onClick={() => (onDelete(id))}/></div>
             </div>
         </div>
     )

src/index.css

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: sans-serif;
 }
 
 .c-container {