Рассчитать сумму и показать данные в интерфейсе

Я пишу код реакции, который показывает данные JSON в табличной форме. И есть кнопка, по нажатию которой я хочу суммировать данные столбца, добавить их в новый столбец ( sum) и отобразить. Вот мой код.

import { useState } from "react";
const NewTable = () => {
 const [data, setData] = useState([
 { val: 2, val2: 3, val3: 1 },
 { val: 4, val2: 1, val3: 9 },
 { val: 6, val2: 1, val3: 1 }
 ]);
 const keys = Object.keys(data[0]);
 const processData = () => {
 data.map((item) => {
 var currRowValues = Object.values(item);
 var nd = currRowValues.reduce((a, b) => {
 return a + b;
 });
 return (item["sum"] = nd);
 });
 setData(data);
 };
 return (
 <div>
 <table>
 <thead>
 <tr>
 {keys.map((item, idx) => (
 <th key={idx}>{item}</th>
 ))}
 </tr>
 </thead>
 <tbody>
 {data.map((item, idx) => (
 <tr>
 {keys.map((key, idx) => (
 <td key={idx}>{item[key]}</td>
 ))}
 </tr>
 ))}
 </tbody>
 </table>
 <button onClick={processData}>Submit</button>
 </div>
 );
};
export default NewTable;

В настоящее время новая строка добавляется, когда я сохраняю код, но не когда я нажимаю кнопку отправки. Пожалуйста, дайте мне знать, как я могу это исправить.
Вот рабочая скрипка того же самого.

Спасибо

Решение проблемы

Я думаю, вы ошибаетесь в использовании Array.map. Array.mapсоздаст новый массив и применит то, что возвращается функцией обратного вызова к каждому элементу, вы можете прочитать больше здесь. С учетом сказанного, setStatein в processDataосновном ничего не делает, поскольку ваши данные не меняются, и вы устанавливаете состояние с тем, с чем вы инициализируете состояние. Чтобы использовать новое значение карты, вы можете присвоить его переменной или константе и использовать, как показано ниже:

...
const processData = () => {
 var rowWithSum = data.map((item) => {
 var currRowValues = Object.entries(item);
 var nd = currRowValues.reduce((a, [key, value]) => {
 if(key === 'sum'){
 return a
 }
 return a + value;
 }, 0);
 return {...item, sum: nd};
 });
 setData(rowWithSum);
};
...