stackoverflow react table

gistfile1.txt

import React from "react";
import "./App.css";
import Table from "react-bootstrap/Table";

class App extends React.Component {
  state = {
    values: [
      { id: 1, name: "test", isActive: true },
      { id: 2, name: "test2", isActive: false },
      { id: 3, name: "test3", isActive: false },
    ],
  };
  handleToggleChange = (item) => {
    console.log(item);

    this.setState({
      values: this.state.values.map((obj) =>
        obj.id === item.id ? { ...obj, isActive: !item.isActive } : obj
      ),
    });
  };

  renderRowValue = (value) => {
    const sourceId = value.id;
    //const payload = { id: value.id, isActive: !value.isActive };
    return (
      <tr>
        <td key={sourceId}>{value.name}</td>
        <td>
          <input
            type="checkbox"
            checked={value.isActive}
            onChange={() => this.handleToggleChange(value)}
          />
        </td>
      </tr>
    );
  };
  render() {
    return (
      <div className="App">
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Source</th>
            </tr>
          </thead>
          <tbody>
            {this.state.values.map((value) => this.renderRowValue(value))}
          </tbody>
        </Table>
      </div>
    );
  }
}

export default App;