Search code examples
javascriptreactjsreact-proptypes

Webstorm doesn't recognize prop type of ...props

I'm declaring a function like this:

const StudentVideoContainer = ({ course, video, currentScore, storedScore, goal, match, ...props}) => {

in which there are several actions attached to the props object that I don't want to destructure. IMO that chain is long enough as it is. However, prop-types seems unwilling to recognize these functions as long as I don't. enter image description here

I declared my proptypes like this:

StudentVideoContainer.propTypes = {
    course: PropTypes.shape({
        course: PropTypes.shape({}),
        sections: PropTypes.array,
    }),
    video: PropTypes.shape({}),
    currentScore: PropTypes.number,
    storedScore: PropTypes.number,
    goal: PropTypes.number,
    props: PropTypes.shape({
        getStudentSingleCourse: PropTypes.func,
        clearStudentSingleCourse: PropTypes.func,
        getStudentVideo: PropTypes.func,
        clearStudentVideo: PropTypes.func,
    }),
    match: PropTypes.shape({
        params: PropTypes.shape({
            courseId: PropTypes.string,
            videoId: PropTypes.string,
        })
    })
};
StudentVideoContainer.defaultProps = {
    course: PropTypes.shape({}),
    video: PropTypes.shape({}),
    currentScore: PropTypes.number,
    storedScore: PropTypes.number,
    goal: PropTypes.number,
    props: {
        getStudentSingleCourse: PropTypes.func,
        clearStudentSingleCourse: PropTypes.func,
        getStudentVideo: PropTypes.func,
        clearStudentVideo: PropTypes.func,
    },
    match: PropTypes.shape({
        params: PropTypes.shape({
            courseId: PropTypes.string,
            videoId: PropTypes.string,
        })
    })
};

I tried placing everything I put for match inside of the props definition and webstorm stopped recognizing it as valid, but when I pulled it back out and destructured it, webstorm recognized it as valid. I'm not getting any errors in the console that props didn't pass validation. And if I change any of the functions underneath props to anything other than PropTypes.func I do get an error that a function was expected so I am reasonable sure they are in fact being validated.

Am I doing something wrong?

While this doesn't technically produce any errors I can see, that red line is going to drive me crazy and I'm not a fan of next line suppression comments. I didn't know prop validation like this was even a thing until like 2 weeks ago, so I assume I'm just doing it wrong.

Solution

  • But with ...props there won't be any introduction of a new property called props, in that case this should work:

    // Instead of this
props: PropTypes.shape({
    getStudentSingleCourse: PropTypes.func,
    clearStudentSingleCourse: PropTypes.func,
    getStudentVideo: PropTypes.func,
    clearStudentVideo: PropTypes.func,
}),
// Use this (same applies for the defaultProps)
getStudentSingleCourse: PropTypes.func,
clearStudentSingleCourse: PropTypes.func,
getStudentVideo: PropTypes.func,
clearStudentVideo: PropTypes.func,

    See this codesandbox for a basic example (Try changing "Random" to a number, then you'll see in the console, that props validation is working)