Using the Date Range Select Tool to Filter the React Table

Question

I have a response table that populates from the API. I wanted to filter a column based on a date range selection. The problem is that the code does not reach FilterMethod. What can i do 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 found that the problem was that we used the state of the component to control the DateRangePicker value, so when you change the date, it will cause a re-render that cleared the response table of the 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 })}
        ...
      />
    )
  }
}

DateRangePicker , , .