Why toggleSelection and isSelected method are receiving different key parameter?

user_6921494 0
Viewed 840

I am using react-table in version 6.10.0. with typescript. There is an easy way to add checkbox with hoc/selectTable

However toggleSelection an isSelected method you need to provide to manage selection are receiving different key. toggleSelection method is receiving extra "select-" at the beginning.

I could not found any example which such a problem.

I know there is a simple workaround for this problem, but still I could not found any example which extra string at the beginning. I am new in react and it seems that I do it incorrectly.

import "bootstrap/dist/css/bootstrap.min.css";
import ReactTable, { RowInfo } from "react-table";
import "react-table/react-table.css";
import checkboxHOC, { SelectType } from "react-table/lib/hoc/selectTable";

const CheckboxTable = checkboxHOC(ReactTable);
....
render() {
...
<CheckboxTable
    data={this.getData()}
    columns={this.columnDefinitions()}
    multiSort={false}
    toggleSelection={(r,t,v) => this.toggleSelection(r,t,v)}
    isSelected={(key)=> this.isSelected(key)}
/>
}
...
toggleSelection = (key: string, shiftKeyPressed: boolean, row: any): any => {
    ...
    //implementation -over here key is always like "select-" + _id
    ...}

isSelected = (key: string): boolean => {
    // key received here is only _id
    return this.state.selection.includes(key);
}

In all examples I have seen the methods are provided with the same key.

react-table reactjs
1 Answers

Looking at the source, it seems like it's working as intended, or there's a bug. If you haven't found any other mention of this, it's probably the former.

This is where the SelectInputComponents are created:

   rowSelector(row) {
      if (!row || !row.hasOwnProperty(this.props.keyField)) return null
      const { toggleSelection, selectType, keyField } = this.props
      const checked = this.props.isSelected(row[this.props.keyField])
      const inputProps = {
        checked,
        onClick: toggleSelection,
        selectType,
        row,
        id: `select-${row[keyField]}`
      }
      return React.createElement(this.props.SelectInputComponent, inputProps)
    }

The two handlers of interest are onClick (which maps to toggleSelection) and checked, which maps to isSelected. Notice the id here.

The SelectInputComponent looks like this:

const defaultSelectInputComponent = props => {
  return (
    <input
      type={props.selectType || 'checkbox'}
      aria-label={`${props.checked ? 'Un-select':'Select'} row with id:${props.id}` }
      checked={props.checked}
      id={props.id}
      onClick={e => {
        const { shiftKey } = e
        e.stopPropagation()
        props.onClick(props.id, shiftKey, props.row)
      }}
      onChange={() => {}}
    />
  )

In the onClick (i.e. toggleSelection) handler, you can see that props.id is passed in as the first argument. So this is where the additional select- is being added.

I'm not familiar with this package so I can't tell you if it's a bug or a feature, but there is a difference in how these callback arguments are being passed. Due to the maturity of the package, it strongly suggests to me that this is intended behaviour.

user_938120
Related