8

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.
rex
  • 2,785
  • 5
  • 31
  • 56

1 Answers1

3

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.

Oleksandr Fediashov
  • 3,967
  • 1
  • 20
  • 40