Get Data from table and save into State? - reactjs

Question

I have a table that the user can edit the rows so i can save it into a state and save it inside a database but how can i get table row values and save it inside a state ? therefor the rows can be dynamic rows for example like grade i will fetch how many subjects inside a specific subject and the admin can put numbers inside rows so i can calculate how many grade does the user get for this subject
<table className="table-fill">
<thead>
<tr>
<th className="text-left">Subjects</th>
<th className="text-left">Grade</th>
</tr>
</thead>
<tbody className="table-hover">
<tr>
<td className="text-left" contentEditable="true">subject 1</td>
<td className="text-left" contentEditable="true">50</td>
</tr>
<tr>
<td className="text-left" contentEditable="true">subject 2</td>
<td className="text-left" contentEditable="true">40</td>
</tr>
<tr>
<td className="text-left" contentEditable="true">subject 3</td>
<td className="text-left" contentEditable="true">30</td>
</tr>
</tbody>
</table>

Answer 1

You should not use contentEditable="true" because it have no onChange event, so use input instead
import { useState } from "react";
export default function App() {
const [data, setData] = useState([
{ subject: "subject 1", grade: 50 },
{ subject: "subject 2", grade: 40 },
{ subject: "subject 3", grade: 30 }
]);
const onChangeRow = ({ type, index, value }) => {
const newData = data.map((item, idx) => {
if (idx === index)
return {
...item,
[type]: value
};
return item;
});
setData(newData);
};
const totalGrade = data.reduce((acc, cur) => {
acc += cur.grade;
return acc;
}, 0);
return (
<div className="App">
<table className="table-fill">
<thead>
<tr>
<th className="text-left">Subjects</th>
<th className="text-left">Grade</th>
</tr>
</thead>
<tbody className="table-hover">
{data.map((item, index) => (
<tr key={index}>
<td className="text-left">
<input
type="text"
defaultValue={item.subject}
onChange={(e) =>
onChangeRow({
type: "subject",
index,
value: e.target.value
})
}
/>
</td>
<td className="text-left">
<input
type="number"
defaultValue={item.grade}
onChange={(e) =>
onChangeRow({
type: "grade",
index,
value: parseInt(e.target.value || 0)
})
}
/>
</td>
</tr>
))}
</tbody>
</table>
<div>Total grade: {totalGrade}</div>
</div>
);
}
style.css
input {
border: none;
outline: none;
}
You can check in my codesandbox. Hope it help!