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

semirturgay · Accepted Answer · 2020-07-20 19:01:16Z

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)

edited Jul 20, 2020 at 19:01

answered Jul 20, 2020 at 18:43

semirturgay

4,1993 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Singh Over a year ago

1st solution works, but as the component renders, I want all the products to get render, but with the first solution when I am setting state: { filter: "IPhone" } So as the component gets render, it shows the iphone products.

semirturgay Over a year ago

@Singh the second way will help you to achieve the desired behaviour.

Singh Over a year ago

There is something wrong with this filter, .filter((data) => data === this.state.filter)

semirturgay Over a year ago

@Singh i see can you try the updated answer so it should be : .filter((data) => this.state.filter && (data === this.state.filter) ? true: false)

semirturgay Over a year ago

can you share the whole component,

|

semirturgay · Accepted Answer · 2020-07-20 18:45:59Z

0

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;
                }                
              })

edited Jul 20, 2020 at 18:45

semirturgay

4,1993 gold badges32 silver badges50 bronze badges

answered Jul 20, 2020 at 18:42

Sawan Patodia

8396 silver badges13 bronze badges

2 Comments

Singh Over a year ago

Still I am not getting the data as soon as the component renders. I just realized that if I remove .filter((data) => data === this.state.filter) ,then I'll be able to get the data as component renders, but then I wont be able to perform dropdown filtering..

Sawan Patodia Over a year ago

@Singh Please create a sample codesandbox link. It's hard to debug with half the code

Collectives™ on Stack Overflow

Search filtering & dropdown filtering in reactjs

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related