roylee0704 / react-flexbox-grid

A set of React components implementing flexboxgrid with the power of CSS Modules.
http://roylee0704.github.io/react-flexbox-grid/
2.93k stars 206 forks source link

Console Flooded with Unknown props 'lg', 'md', 'xs' etc. Warnings #139

Open efeminella opened 6 years ago

efeminella commented 6 years ago

It appears with version 1.1.5 Issue 45 has resurfaced in the context of a Row Component.

This regression results in the console being flooded with Warnings for Unknown props 'lg', 'md', 'xs' etc. when added to Row; though, I am unsure if such props are valid on a Row Component. That being said, these props (as well as other unknown props) should be properly filtered as as not be passed down to the underlying DOM element.

warning.js:33 Warning: Unknown prop xs on <div> tag. Remove this prop from the element. 
For details, see https://fb.me/react-unknown-prop
    in div (created by Row)
    in Row (created by CoreLayout)
    in div (created by Grid)
    in Grid (created by CoreLayout)

...

danny-andrews commented 6 years ago

I'm not able to reproduce this. Can you paste the code which is causing the issue?

efeminella commented 6 years ago

Sure thing, below is the code with only only the React FlexboxGrid components (for brevity):

  <Grid fluid>
    <Row>
      <Col mdOffset={3} xs={12} sm={12} md={6}>
      </Col>
    </Row>
    <Row center='xs'>
      <Col xs={12} sm={12} md={3}>
      </Col>
      <Col xs={12} sm={12} md={3}>
      </Col>
      <Col xs={12} sm={12} md={3}>
      </Col>
    </Row>
    <Row center='xs'>
      <Col sx={12}>
      </Col>
    </Row>
  </Grid>

The layout worked fine prior to upgrading and did not result in any warnings, likewise, the layout behaves as expected after upgrading; however, the console warnings remain. It appears this is the result of the props being passed down to the underlying div elements.

jacargentina commented 6 years ago

@efeminella could you try with https://jacargentina.github.io/react-flexbox-grid/ please