CODEWITHSUNDEEP
javascriptreactjstypescripterror-handlingfiltering
Singh
Singh

Reputation: 207

How to show an error message when no data is found while filtering

I have a component, where I am doing search filtering & dropdown filtering, filtering is working but I am not able to figure it out where to show error if there is no data found while filtering. Can anyone help me with this

 searchSpace = (event) => {
            this.setState({
              search: event.target.value,
            });
          };
    
 sortOptions = [
    {value: "ALL", label: "All"},
    { value: "Iphone", label: "Iphone" },
    { value: "Samsung", label: "Samsung" },
  ];

  getSelectedItem = (items, selectedValue) => {
    return items.find((item) => item.value === selectedValue);
  };

  dropdown = (event) => {
        console.log("filter", event.selectedItem.value);
        this.setState({
          filter: event.selectedItem.value,
        });
      };

     render() {
           const { details} = this.state;
          const items = this.state.details
              .filter((data) => {
                if (this.state.search == null) return data;
                else if (data.includes(this.state.search)) {
                  return data;
                }                
              })
              const data = items
              .filter((data) => this.state.filter === "" || data === this.state.filter)
              .map((data) =>
                   <>
                  <ShareCard></ShareCard>
                </>    
            );
    return (
  <Search placeHolderText="Search" onChange={(e) => this.searchSpace(e)}/>

<Dropdown id="filtering items={this.sortOptions}
 onChange={(e) => this.dropdown(e)}
  selectedItem={this.getSelectedItem(
 this.sortOptions,
 this.state.filter
 )} />

    <div>{data}</div>
    )
    );

Upvotes: 0

Views: 960

Answers (1)

Drew Reese
Drew Reese

Reputation: 203572

A really simple use-case to display an error if items is empty is to use conditional rendering. If the items array length is truthy, i.e. greater than zero, then render the data, otherwise render error message.

<div>
  {items.length ? data : "Error: There are no items!!"}
</div>

Upvotes: 1

Related Questions