React table filter type error (.toLowerCase)

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

Im using shadCN's task example

bentoOP•7/10/23, 1:42 AM

adding a toString() to the end of filterValues fixes the error but it messes us the filtering as the string eg. 10A is split into "1","0","A"

JacobParis•7/10/23, 1:56 AM

If you want to lowercase the elements in your array, use a map instead

filterValues.map(value => value.toLowerCase())

filterValues.map(value => value.toLowerCase())

JacobParis•7/10/23, 1:58 AM

I don't see in your code example where you're calling toLowerCase but you probably want at the end

column.setFilterValue(filterValues.length
  ? filterValues.map(value => value.toLowerCase())
  : undefined
)

column.setFilterValue(filterValues.length
  ? filterValues.map(value => value.toLowerCase())
  : undefined
)

bentoOP•7/10/23, 5:50 AM

to lowercase is being called from react table's getRowModel

bentoOP•7/10/23, 5:50 AM

bentoOP•7/10/23, 5:51 AM

this doesnt work either... i think its being converted somewhere else

React table filter type error (.toLowerCase)

Similar Threads

Similar Threads

Similar Threads