Unknown props issue

[Borisboky]

I have an issue with props. My render method is something like this :

render() {
        const language = this.props.language.default.portal;
        const cars = this.props.cars;
        const favorites = this.props.favorites;
        const cartContent = this.props.cartContent;
        const addToFavorites = this.props.addToFavorites;
        const removeFromCard = this.props.removeFromCard;
        const addToCard = this.props.addToCard;
        const handleOffers = this.props.handleOffers;
        const offers = this.props.offers;
        const currentUserEmail = getUserEmail();

        return (
            <div className="cars">
                    <div>
                        <Shuffle>
                        {cars.map((car, i) => {
                            const initialReg = car.initialRegistration.slice(0,3) + car.initialRegistration.slice(6,10);
                            // str.slice(1, 4) extracts the second character through the fourth character (characters indexed 1, 2, and 3)

                            return (
                                <div key={i} className="carBox noPadding">
                                    <div className="carBoxContent">

                                        <PhotoAndFavorites car={car} language={language} changeStarIcon={this.changeStarIcon} addToFavorites={addToFavorites} userEmail={currentUserEmail} favorites={favorites}/>

                                        <div className="carNameAndDesc">
                                            <div><Link to="" style={{textDecoration: 'none'}}>{car.make}</Link></div>
                                            <div>{car.desc}</div>
                                        </div>

                                        <div className="carPrice">
                                            <div>{car.price}</div>
                                            <div>{car.btw}</div>
                                        </div>

                                        <div className="extraFeatures" style={{marginBottom: 5, backgroundColor: '#eee'}}>

                                        </div>

                                        <div className="mainFeatures">
                                            <div><img src="../images/portal/user/status/fuel-icon.png" style={{height: 12}}/> <span>{car.fuel}</span></div>
                                            <div><img src="../images/portal/user/status/road-icon.png" style={{height: 12}}/> <span>{car.mileage}</span></div>
                                            <div><img src="../images/portal/user/status/calendar-icon.png" style={{height: 12}}/> <span>{initialReg}</span></div>
                                        </div>

                                        <Buttons car={car}
                                                 language={language}
                                                 changeButton={this.changeButton}
                                                 addToCard={addToCard}
                                                 removeFromCard={removeFromCard}
                                                 cartContent={cartContent}
                                                 userEmail={currentUserEmail}
                                                 handleChange={handleOffers}
                                                 offers={offers}
                                                 opacity={this.props.opacity}
                                                 />

                                    </div>
                                </div>
                            );
                        })}
                        </Shuffle>
                    </div>
                <div className="clearfix"/>
            </div>
        );
    }

But the animation doesn't happening and I'm getting warning
bundle.js:8394 Warning: Unknown props duration, fade, initial on div tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

[marcelopereirascmspain]

Hi, this issue is fixed by #25
Waiting for 2.0.1 bump

[Borisboky]

My package.json is something like :

{
  "name": "Autralis",
  "version": "0.1.0",
  "private": false,
  "devDependencies": {
    "react-scripts": "0.4.1",
    "react-slick": "^0.14.3"
  },
  "dependencies": {
    "crypto-js": "^3.1.6",
    "react": "^15.3.1",
    "react-addons-css-transition-group": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-fontawesome": "^1.2.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "react-shuffle": "^2.0.0",
    "react-telephone-input": "^3.5.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

And the render in src/shuffle.js is something like :

render() {
    let { initial, fade, duration, ...props } = this.props;
    var showContainer = initial ? 0 : 1;
    if (this.state.ready) {
      showContainer = 0;
    }
    return (
      <div ref="container" style={{position: 'relative'}} {...props}>
        <div style={{opacity: showContainer}}>
          {this._childrenWithRefs()}
        </div>
      </div>
    );
  }

But the warning still exists.

[Borisboky]

Any idea why this is not working?

[soetji]

When will this fix be available on npm?

[marcelopereirascmspain]

@kenwheeler could you publish the module with the new fixes? Thanks.

[joshgagnon]

The lib folder needs to be recompiled, that is all.

[svnlto]

If @kenwheeler could publish this. would be fantastic..