On row select in antd table the checkbox is not checking in react

Question

I am using antd table for viewing the data in a table format in react. I have used rowSelection for selecting a row.

On clicking the checkbox column, the checkbox is not set, but the event is generating.

class AppUser extends Component {
  state = {
    mockTableData: null,
    selectedRowKeys: []
  };
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const apiURL = `${api_URL}/locations`;
    axios.get(apiURL).then(res => {
      this.setState({ mockTableData: res.data });
      this.setState({ loading: false });
    });
  }
  onExpand = (expanded, record) => {
    console.log("onExpand", expanded, record);
  };
  onSelect = (record, selected, selectedRows, nativeEvent) => {
    console.log(record, selected, selectedRows, nativeEvent);
  };

  render() {
    const rowSelection = {
      selectedRowKeys: [],
      onChange: this.onSelect
    };
    return (
      <div>
        <HeaderComponent />
        <h1>App user Component</h1>
        <Tabs>
          <TabPane tab="App-User" key="1">
            <Table
              columns={columns}
              rowSelection={rowSelection}
              expandedRowRender={(record, index, indent, expanded) =>
                expanded ? <p>extra: {record.location_name}</p> : null
              }
              onExpand={this.onExpand}
              dataSource={this.state.mockTableData}
            />
          </TabPane>
          <TabPane tab="Non-App-User" key="2">
            <h2>2nd Tab</h2>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
export default AppUser;

Don't know where I'm going wrong.

Answer 1

On every render you re-defining rowSelection (because the body of render() executes on every render), move it to class instance/state (and use it accordingly this.rowSelection / this.state.rowSelection ).

class AppUser extends Component {
  rowSelection = {
    selectedRowKeys: [],
    onChange: this.onSelect
  };

  ...

  render() {
    return (
      <div>
        ...
        <Tabs>
          <TabPane tab="App-User" key="1">
            <Table
              rowSelection={this.rowSelection}
              ...
            />
          </TabPane>
          ...
        </Tabs>
      </div>
    );
  }
}
export default AppUser;