React: Filter table data with multiple column values

Question

I have the following an array object data. I wanted to filter it's data when a user provide either title, category or published values from an input. I can only filter the data only with title value. How can I make it to category and published values as well? here is my code. `

const data = [
  { id: 1, title: "Hunger games 2", category: "Action", published: "2013" },
  { id: 2, title: "Iron Man", category: "Action", published: "2013" },
];

const [searchValue, setSearchValue] = useState(""); //searchValue is an input value

const DisplayData = data
    ?.filter((row) => row?.title?.match(new RegExp(searchValue, "i")))
    ?.map((items) => {
      return (
        <>
          <tr key={items.id}>
            <td className="text-center">{items.title}</td>
            <td>{items.category}</td>
            <td>{items.published}</td>
          </tr>
        </>
      );
    });

Matheus C. B. · Accepted Answer · 2022-09-08 16:34:13Z

1

You can add "or" conditions to your filter:

const DisplayData = data
    ?.filter((row) => row?.title?.match(new RegExp(searchValue, "I")) || 
      row?.category?.match(new RegExp(searchValue, "I")) ||
      row?.published?.match(new RegExp(searchValue, "I"))
    )
    ?.map((items) => ...

answered Sep 8, 2022 at 16:34

Matheus C. B.

1062 bronze badges

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

1 Comment

Teshie Ethiopia Over a year ago

Perfect! Thanks. But What the difference between i and I parameters?

Collectives™ on Stack Overflow

React: Filter table data with multiple column values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related