Using React Date Range picker to filter a React table

Question

I have a react table which gets populated from an API. I wanted to filter a column based on a Date range picker. Problem is that the code does not reach the FilterMethod. What could I be doing wrong?. Here is my code

const columnsvisit = [{
  id: 'date',
  Header: 'Date',
  accessor: rowProps => rowProps.date,

  Filter: ({ filter, onChange }) =>
       <div>
        <DateRangePicker  startDate={this.state.startDate}
                          endDate={this.state.endDate} ranges={this.state.ranges} 
                          onEvent={this.handleEvent} 
                          >

        <Button className="selected-date-range-btn" style={{width:'100%'}}>


            <span >
            <input type="text" name="labrl" value={label }
            onChange={event => onChange(event.target.value)} readOnly 
            />
            </span>
            <span className="caret"></span>

        </Button>
      </DateRangePicker>
      </div>,
 filterMethod: (filter, row) => {
  console.log(filter.value)

},

Answer 1

We ran into the same problem and @CrustyRatFink discovered that the issue was that we were using component state to manage the value of the DateRangePicker so when you changed the date it would trigger a re-render, which cleared out react-table's filtered list.

The solution is to either manage the filtered list in component state:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
       filtered: []
    }
  }
  render() {
    return (
      <ReactTable
        filtered={this.state.filtered}
        onFilteredChange={filtered => this.setState({ filtered })}
        ...
      />
    )
  }
}

or to manage the state and value of the DateRangePicker in a separate component so it doesn't trigger a re-render of the component containing the table.