Unknown props `xs`, `sm` on <div> tag

Ugarz commented 8 years ago

Context Hi there, I'm using react-flexbox-grid on a React-Redux project. Reading this example on how to implement react-flexbox-grid Following :

<Grid fluid>
    <Row>
      <Box type="row" xs={12} sm={3} md={2} lg={1} />
      <Box type="row" xs={6} sm={6} md={8} lg={10} />
      <Box type="row" xs={6} sm={3} md={2} lg={1} />
    </Row>
    <Row>
      <Box type="row" xs={12} sm={3} md={2} lg={1} />
      <Box type="row" xs={12} sm={9} md={10} lg={11} />
    </Row>
    <Row>
      <Box type="row" xs={10} sm={6} md={8} lg={10} />
      <Box type="row" xs={2} sm={6} md={4} lg={2} />
    </Row>
  </Grid>

Issue Here's my code

<Grid>
  <Row>
    <Col xs={12} sm={6}>
      <Input label="Met ton prénom !" name="firstname" ref="John" onFocus={() => this.changeState(this.refs.John)} />
      <Input label="Ton nom, plus vite que ça !" name="lastname" ref="Doe" onFocus={() => this.changeState(this.refs.Doe)} />
      <Input label="Et ton âge pour la NSA !" name="age" ref="age" onFocus={() => this.changeState(this.refs.age)} />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </Col>
    <Col xs={12} sm={6}>
      <Helper focusedElement={this.state.focusedElement} >
        <HelperContent datas={datas} >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.<br/>
            Phasellus eget dui non tortor malesuada ultrices vitae quis ex.
          </p>
          <img src="http://placehold.it/250x150" />
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
          </ul>
        </HelperContent>
      </Helper>
    </Col>
  </Row>
</Grid>

When using this I get some warnings

warning.js:44Warning: Unknown props `xs`, `sm` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Col)
    in Col (created by PersonalInformations)
    in div (created by Row)
    in Row (created by PersonalInformations)
    in div (created by PersonalInformations)
    in PersonalInformations (created by Form)
    in div (created by Accordion)
    in div (created by Accordion)
    in Accordion (created by Form)
    in div (created by Form)
    in section (created by PageContainer)
    in div (created by PageContainer)
    in PageContainer (created by Form)

When I remove xs sm all warnings disapear. Does anyone has an Idea on what is going on ?

pavel06081991 commented 8 years ago

Did you import Col component? I mean are there such code const {Grid, Row, Col} = require('react-flexbox-grid'); in your file?

Ugarz commented 8 years ago

For sure :

import { Grid, Col, Row } from 'react-flexbox-grid';

Here is the full code where I get this warning :

import React from 'react';
import { Grid, Col, Row } from 'react-flexbox-grid';
import { Helper, HelperContent, Input } from 'presentationals';
import PageComponents from '../';

export default class DocHelper extends PageComponents {
  state = {

  }
  changeState = (focusedElement) => {
    this.setState({
      focusedElement
    });
  }
  render() {
    const datas = {
      input1: 'Veuillez rentrer votre prénom',
      input2: 'Veuillez rentrer votre nom',
      input3: 'Veuillez rentrer votre email'
    };
    const content = (
      <div>
        <article className={this.baseStyle.categoryWrapper}>
          <h2>DocHelper</h2>
          <ul>
            {/* Dark theme */}
            <li className={this.baseStyle.twoCols}>
              <h3>DocHelper</h3>
              <div style={{ position: 'relative' }}>
                <Grid>
                  <Row>
                    <Col xs={12} sm={6}>
                      <Input label="Met ton prénom !" name="firstname" ref="John" onFocus={() => this.changeState(this.refs.John)} />
                      <Input label="Ton nom, plus vite que ça !" name="lastname" ref="Doe" onFocus={() => this.changeState(this.refs.Doe)} />
                      <Input label="Et ton âge pour la NSA !" name="age" ref="age" onFocus={() => this.changeState(this.refs.age)} />
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                      </p>
                    </Col>
                    <Col xs={12} sm={6}>
                      <Helper focusedElement={this.state.focusedElement} >
                        <HelperContent datas={datas} >
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.<br/>
                            Phasellus eget dui non tortor malesuada ultrices vitae quis ex.
                          </p>
                          <img src="http://placehold.it/250x150" />
                          <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac libero et velit tincidunt dictum at non lacus.</li>
                          </ul>
                        </HelperContent>
                      </Helper>
                    </Col>
                  </Row>
                </Grid>
              </div>
            </li>
          </ul>
        </article>
      </div>
    );
    return super.render('Checkboxe', content);
  }
}

caesay commented 8 years ago

I also get these errors, along with a plethora of other console errors when using this library. The issue is that this library doesn't properly filter the props it gives to its child div node, it just passes them all (including the props it uses internally) and that's why React is complaining.