semantic-ui-react <Responsive> not working for <Table.Cell>

Question

I am using semantic-ui react to render a table of data. My requirement is that when the page is on mobile view, I hide certain columns. I tried using className="mobile hidden" on the Table.Cell element but this doesn't seem to work at all.

Then I tried using the Responsive component like below but I am getting an error. Am I missing something here? Unable to find anyone else having this issue ...

  <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
     {record.datapoint}
  </Responsive>

I get this error in the console when resizing the window...

index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Responsive component.

Answer 1

In fact, this is bug :( I've created PR that will solve described issue, see Semantic-Org/Semantic-UI-React#2421.

Code that you provided doesn't reproduce problem, the issue will be never occured with provided example. However, it exists :) The core problem is the unmount of Responsive component when it will be done by parent and setState() will be called on unmouted component. An example on codesandbox reproduces problem.