Warning: Failed propType: Invalid prop `swimmingSnapshot` of type `function` supplied to `LaptopHandling`,

Question

-I am new to react. - Can you guys tell me why the below warning is coming Warning: Failed propType: Invalid prop swimmingSnapshot of type function supplied to LaptopHandling, expected object. Check the render method of Connect(LaptopHandling). - I added this new prop swimmingSnapshot: React.PropTypes.object.isRequired, - after this prop only I am getting it. - can you guys tell me how to fix it. - providing my code below.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import moment from 'moment';
import FutureSports from '../../components/basketball-sports/basketball-sports-container';


class LaptopHandling extends Component {
    constructor(props) {
        super(props);

    }

    render() {

        let {swimmingInfo, swimmingSnapshot, swimmingPositions, player, swimmingPerformance} = this.props;
        let managedProductActivationDate = swimmingInfo.managedProductActivationDate;
        let past1Day = moment().subtract(1, 'days').format('YYYY-MM-DD');
        let jumpingDone= managedProductActivationDate < past1Day;

        let welcomeMessage = '';

        if(swimmingInfo !== '' && !jumpingDone) {
            welcomeMessage = 'Testing1';

        }else if(jumpingDone) {
            welcomeMessage = 'testing2';

        }else if(swimmingSnapshot !==  undefined && swimmingPositions.positions.length > 0 ) {
            welcomeMessage = 'testing 3';

        }else if(swimmingPerformance !==  undefined ) {
            welcomeMessage = 'Ytesting4';
        }

        const name = this.props.profile.firstName || '';
        const formatName = name && name.length > 0 ? <span style={{textTransform: 'capitalize'}}>, {name.toLowerCase()}</span> : '';

        return (
            <div id="main" className="section flex-container flex-full">
                <section className="page-content flex-item">
                    <section className="gray-box">
                        <h2>Welcome to your Digital Investment Adviser dashboard{formatName}.</h2>
                        <p className="pg-intro pg-day1 pg-day2">{welcomeMessage}</p>
                        <FutureSports 
                            jumpingDone={jumpingDone}
                            swimmingInfo={swimmingInfo} 
                            swimmingSnapshot={swimmingSnapshot}
                            swimmingPositions={swimmingPositions}
                            swimmingPerformance={swimmingPerformance}
                            player={player}
                        />
                    </section>
                </section>
            </div>
        );
    }
}




LaptopHandling.propTypes = {
    swimmingInfo: React.PropTypes.object,
    data: React.PropTypes.object,
    goalDetails: React.PropTypes.object,
    profile: React.PropTypes.object,
    swimmingSnapshot: React.PropTypes.object.isRequired,
    swimmingPositions: React.PropTypes.object.isRequired,
    swimmingPerformance: React.PropTypes.object.isRequired,
    player: React.PropTypes.object.isRequired,
    managedProductActivationDate: React.PropTypes.object.isRequired
};

export default connect(state => ({
    data: state.swimmingSnapshot,
    goalDetails: state.goalDetails,
    swimmingInfo: state.swimmingInfo,
    profile: state.template.profile,
    swimmingSnapshot: React.PropTypes.object.isRequired,
    swimmingPositions: React.PropTypes.object.isRequired,
    swimmingPerformance: React.PropTypes.object.isRequired,
    player: state.player
}))(LaptopHandling);

yadhu yadhu · Accepted Answer · 2016-11-29T02:40:33

As your LaptopHandling.propTypes says:

swimmingSnapshot: React.PropTypes.object.isRequired,

Which means swimmingSnapshot is exepecting an object but it was passed a function instead.

The problem is in your connect.

export default connect(state => ({
    data: state.swimmingSnapshot,
    goalDetails: state.goalDetails,
    swimmingInfo: state.swimmingInfo,
    profile: state.template.profile,
    swimmingSnapshot: React.PropTypes.object.isRequired,  ----> X
    swimmingPositions: React.PropTypes.object.isRequired,  ----> X
    swimmingPerformance: React.PropTypes.object.isRequired,  ----> X
    player: state.player
}))(LaptopHandling);

All the properties that I marked "X" are passed the propType functions from React, which is totally unexpected.

You might want something like this:

export default connect(state => ({
    data: state.swimmingSnapshot,
    goalDetails: state.goalDetails,
    swimmingInfo: state.swimmingInfo,
    profile: state.template.profile,
    swimmingSnapshot: state.swimmingSnapshot,
    swimmingPositions: state.swimmingPositions,
    swimmingPerformance: state.swimmingPerformance,
    player: state.player
}))(LaptopHandling);

Make sure state has all those keys under it. Also I notice that data and swimmingSnapshot has the same value, you will probably need only one of them.

Warning: Failed propType: Invalid prop `swimmingSnapshot` of type `function` supplied to `LaptopHandling`,

1 Answers