Ensure that data is initialized before filtering method

Trying to do filtering on datatable based on this answer: Data Table filtering using react-data-table-component

Filtering is successful. But before filtering, this.filteredItems is not defined.

  1. If i use data={this.filteredItems}, it will show undefined but once i filter, data will start showing
  2. If i use data={result}, it will show all results but not allow me to filter
class Table extends React.Component {
  ... ommitted irrelevant codes

  render() {
    const result = this.props;
    const getSubHeaderComponent = () => (
      <FilterComponent                             
        onFilter={(e) => {
          const newFilterText = e.target.value;
          this.filteredItems = result.filter(        //Filtering works with this.filteredItems
            item => item.name
                && item.name.toLowerCase().includes(newFilterText.toLowerCase())
          );
          this.setState({ filterText: newFilterText });
        }}
        onClear={this.handleClear}
        filterText={this.state.filterText}
      />
    );

    return (
      <React.Fragment>
        <DataTable
          columns={columns}
          data={this.filteredItems}   // Only if i filter, then data will appear. Else it will be undefined because the original data is from result
          subHeader
          subHeaderComponent={getSubHeaderComponent()}
        />
      </React.Fragment>
    );
  }
}

Answer

so you can feed the data conditionally

       <DataTable
          columns={columns}
          data={this.filteredItems ? this.filteredItems : result}
          subHeader
          subHeaderComponent={getSubHeaderComponent()}
        />