React form with a table, drop down menu and checkboxes

gistfile1.txt

/* eslint-disable no-param-reassign */
import React from 'react';

class TestTable extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      data: [{ name: 'Alan', age: 23 }, { name: 'John', age: 30 }, { name: 'Peter', age: 10 }],
      newItem: '',
      checkedItems: [],
      categories: [{ id: '232352', categoryName: 'Fun' }, { id: '555111', categoryName: 'Rest' }],
      selectedCategoryId: ''
    };

    this.InputItem = (event) => { this.setState({ newItem: event.target.value }); };

    this.AddItem = () => {
      if (this.state.newItem === '') return;
      this.setState({
        data: [...this.state.data, { name: this.state.newItem, age: 40 }],
        newItem: ''
      });
    };

    this.TestAddItem = () => {
      this.setState({ data: [...this.state.data, { name: 'Sal', age: 88 }] }); // TEST ADD ITEM
    };

    this.DeleteCheckedItems = () => {
      let state = this.state.data;
      this.state.checkedItems
        .forEach((checkedId) => {
          state = state.filter(item => item.age !== parseInt(checkedId));
        });
      this.setState({
        data: state
      });
      document.querySelectorAll('input[name=checkItem]')
        .forEach((checkbox) => { checkbox.checked = false; }); // To cleanup weird check remaining
    };

    this.trackCheckedItems = (event) => {
      if (event.target.checked) {
        this.setState({ checkedItems: [...this.state.checkedItems, event.target.value] });
      } else {
        this.setState({
          checkedItems: this.state.checkedItems.filter(item => item !== event.target.value)
        });
      }
    };

    this.trackedSelectedCategory = (event) => {
      this.setState({ selectedCategoryId: event.target.value });
    };
  }

  render() {
    return (
      <div>
        <div>A table to test React</div>
        <input type="text" name="" placeholder="add an item" value={this.state.newItem} onChange={this.InputItem} />
        <select value={this.state.selectedCategoryId} onChange={this.trackedSelectedCategory}>
          <option disabled value="">Select a category</option>
          {
            this.state.categories.map((item, index) =>
              <option key={index} value={item.id}>{item.categoryName}</option>
            )
          }
        </select>
        <button onClick={this.AddItem}>Add item</button>
        <button onClick={this.TestAddItem}>Add default item</button>
        <button onClick={this.DeleteCheckedItems}>Delete items</button>
        <table>
          <thead>
            <tr>
              <td />
              <td>Name</td>
              <td>Age</td>
            </tr>
          </thead>
          <tbody>
            {
              this.state.data.map((item, index) =>
                <tr data-itemNumber={index} key={index}>
                  <td>
                    <input type="checkbox" value={item.age} name="checkItem" onClick={this.trackCheckedItems} />
                  </td>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                </tr>
              )
            }
          </tbody>
        </table>
      </div>
    );
  }
}

export default TestTable;