Search filtering & dropdown filtering in reactjs

Question

In the below render method, I am performing search filter & dropdown filter on the cards. Searching & dropdwon filtering are working fine, but the problem is, 1st time when my component gets render, I do not get any Card sen on the screen. I see the card on the screen only when I enter some value in my dropdown .Can anyone help me with me whats wrong in my code, and how to show Cards first and then perform filtering & searching there.. Also If I remove .filter((data) => data === this.state.filter) , I'll be able to render the data as component gets render, but then I wont be allow to perform dropdwon filter. I think this filter is causing the issue, but not sure how to fix it, as well as to perform search & dropdown filtering

 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) => 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>
    )

Answer 1

Since you leave the this.state.filter initially undefined thats why at the first render you don't see any results.

you should either add a default filter to the initial state:

state: {
   filter: "<an initial value based on your data>"
}

or apply the filter when it is set :

const data = items
              .filter((data) => this.state.filter && (data === this.state.filter) ? true: false)

Answer 2

const items = this.state.details
              .filter((data) => {
                if (this.state.search == null || this.state.search == "" || this.state.search == undefined) return data;
                else if (data.includes(this.state.search)) {
                  return data;
                }                
              })