How to filter on ANTD table when the column is a JSON array instead of a string

It is very difficult to guess what went wrong from the error you provided. So the best I can do is to point out a few things that you should take care of.

The render method of getColumnSearchProps() is erroneous. If the text is null (due to a row not having any Tags) it will try to convert it to a string and crash. To avoid that, check text exists before rendering:

render: text =>
      text ? (
        <Highlighter
          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text.toString()}
        />
      ) : null

The same applies for onFilter method:

onFilter: (value, record) =>
  record[dataIndex]
    ? record[dataIndex]
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase())
    : false,

You have two render methods for rendering Tags column. One inside getColumnSearchProps() and one after ...this.getColumnSearchProps('Tags') call. This should be fine because the later will override the previous. Then again, why would you declare the precious if you don't need it?

Hope this helps.


As said in another thread, this error can rise if you try to import a non-existent component. Make sure you have no typo and that the component indeed named that way. In case of libraries make sure you use the proper version, since components can have different names in different versions.

Links with similar issue:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
React.createElement: type is invalid -- expected a string or a class/function but got: undefined