如何阻止我的搜索功能检查大小写（大写/小写）-Javascript / ReactJS

Question

I am working on a search function in ReactJS. My search function is working fine , but it is checking cases(Uppercase/lowercase). This is my Demo Fiddle . You can check the search functionality. I want to get rid of the case checking(Uppercase/lowercase). How should I change the code in the easiest manner?

This is my Search function

getMatchedList(searchText) {
    console.log('inside getMatchedList');
    if (searchText === ''){
      this.setState({ data: this.state.dataDefault });
    }
    if (!TypeChecker.isEmpty(searchText)) {//Typechecker is a dependency
      console.log('inside if block');
      const res = this.state.dataDefault.filter(item => {
        return item.firstName.includes(searchText) || item.lastName.includes(searchText);
      });
      console.log('res' + JSON.stringify(res));

      this.setState({ data: res });
    }
  }

If I remove Typechecker dependency, how should I change the code? I basically want my search function to be case case insensitive

Answer 1

You can use toLowerCase

if (!TypeChecker.isEmpty(searchText)) {
  console.log("inside if block");
  const res = this.state.dataDefault.filter(item => {
    if (
      item.firstName.toLowerCase().includes(searchText.toLowerCase()) ||
      item.lastName.toLowerCase().includes(searchText.toLowerCase())
    )
      return item;
  });
  console.log(res);

  this.setState({ data: res });
}

https://codesandbox.io/s/5yj23zmp34

Answer 2

With ReactTable you can filter out directly through the table props.

When you define your table accessors, you can define them in the following way:

{
  Header: "Name",
  columns: [
    {
      Header: "First Name",
      accessor: "firstName",
      filterMethod: (filter, row) =>
      row[filter..toUpperCase().includes(filter.value.toUpperCase())
    },
    {
      Header: "Last Name",
      id: "lastName",
      accessor: "lastName",
      filterMethod: (filter, row) => row[filter.id].toUpperCase().includes(filter.value.toUpperCase())
     }
   ]
 },

As you can see the filterMethod will do the filter for you.

And then, you can completely remove your getMatchedList function (so you get rid also of TypeChecker as you want to).

The case insensitive is made checking the values using toUpperCase() (you can even use toLowerCase() ) which will give you the case insensitive.

Here your fork:

https://codesandbox.io/s/w0x6wwpo15