Update values in react js

Question

I have a react js application which is responsible to update a status of every user:

function App() {
  const tableData = [
      { name: 'Tanner Linsley', angry: true }
    , { name: 'Bob Dylan', angry: false }
  ];


  const handler = (e) => {
    console.log(e.target.value)
  }

  const columns = [
    {
      Header: 'Name',
      accessor: 'name' // String-based value accessors!
    },
    {
      Header: 'Angry',
      id:'s',
      accessor: (r) => <input checked={r.angry} onChange={handler} type='checkbox'/>,
    }
  ];

  return (
    <div className="App">
      <ReactTable
        data={tableData}
        columns={columns}
      />
    </div>
  );
}

Inside the table appears the angry status which should be updated, but now if i want to change the status i can not update it and the checkboxes still with previous values.
Why i can not update the values and how to solve the issue?
demo: https://codesandbox.io/s/react-table-demo-forked-upn1vt

Answer 1

You should use the useState hook in order to locally store the state of the array and then use - I guess - the name as an identifier to filter the element to be changed.

  const [tableData, setTableData] = useState([
    { name: "Tanner Linsley", angry: true },
    { name: "Bob Dylan", angry: false }
  ]);

  const handler = (e, name) => {
    let newTableData = [...tableData];
    let index = newTableData.findIndex((obj) => obj.name === name);
    newTableData[index].angry = e.target.checked;
    setTableData(newTableData);
  };

input onChange method should be a little bit different in order to pass the name as an argument.

   <input
      checked={r.angry}
      onChange={(e) => handler(e, r.name)}
      type="checkbox"
    />

See this sandbox