question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PropTypes aren't removed when extending via Object.assign()

See original GitHub issue

When a component extends from parent and the properties are extended, they are not removed.

Sample Code:

export default class ComponentB extends ComponentA {
    static propTypes = Object.assign({}, {
        stringKey: PropTypes.string.isRequired,
    }, ComponentA.propTypes)
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
virgofxcommented, Apr 11, 2017

Here is an example use case. Think of complex logic that is required for rendering common components.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class ComplexLogicComponent extends PureComponent {
    static propTypes = {
        baseKey: PropTypes.string.isRequired,
    }

     // Complex logic functions that depend on state
    doComplex() {} 
    getComplex() {}
    updateComplexData() {}

    // No render() since it's designed to be extended
}

/**
 * Component that requires complex logic
 */
class ComponentUsingComplex extends ComplexLogicComponent {
    static propTypes = Object.assign({}, {
        extraRenderProp: PropTypes.string.isRequired,
    }, ComplexLogicComponent.propTypes)

    render() { 
        // Use complex processing from parent to help render node
    }
}

I’ll submit a PR which addresses this hopefully by this weekend … should just be a quick fix in the isReactClass() to use a while loop instead of returning false.

Thanks for being open @oliviertassinari

0reactions
oliviertassinaricommented, Apr 11, 2017

I have tried out your example, that’s working as expected on my end. Here is the output:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class ComplexLogicComponent extends PureComponent {

    // Complex logic functions that depend on state
    doComplex() {}
    getComplex() {}
    updateComplexData() {}

    // No render() since it's designed to be extended
}

/**
 * Component that requires complex logic
 */
class ComponentUsingComplex extends ComplexLogicComponent {

    render() {
        // Use complex processing from parent to help render node
    }
}

Still feel free to submit a PR if you find anything not working as expected.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Invariant Violation: ViewPropTypes has been removed from ...
`ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. ERROR ...
Read more >
React eslint error missing in props validation - Stack Overflow
I got this error because I copied and pasted the object from a different with a slightly different name and forgot to change...
Read more >
How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >
Common code mistakes in React that you (maybe) made
Inspired by some articles, I decided to write this article and describe how to avoid common code mistakes in React app and why...
Read more >
Inheritance and the prototype chain - JavaScript | MDN
We can now use the new operator to create an instance of doSomething() based on this prototype. To use the new operator, call...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found