CODEWITHSUNDEEP
javascriptreactjsantd
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

How can I update the table while deleting the value in search bar?

I'm able to search the table matching the values in my search bar but the state is not updating while deleting the value. Here's my sandbox link

Upvotes: 1

Views: 141

Answers (1)

kockburn
kockburn

Reputation: 17616

Your search input should use a similar onChange handler.

Your initial data shouldn't be directly set in your useState, seperate it into a new file called (i.e.:) data.js and import it as data.

Then on input change, simply filter through the data and choose which ever row matches best.

  const handleSearchChange = e => {
    const {
      target: { value }
    } = e;
    if (!!value) {
      const filteredData = data.filter(row => {
        return Object.values(row)
          .join(" ")
          .toLowerCase()
          .includes(value.toLowerCase());
      });
      setIsAll(filteredData);
    } else {
      setIsAll(data);
    }
  };

sandbox demo

Upvotes: 1

Related Questions