Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: react/prop-types fails to parse destructured Flow typing with Flow union type #1364

Closed
LINKIWI opened this issue Aug 13, 2017 · 2 comments

Comments

@LINKIWI
Copy link

LINKIWI commented Aug 13, 2017

Symptom: react/prop-types indicates that props validation is missing for all props in the component.

This occurs whenever there is a destructured Flow typing anywhere in the component, and props are typed in the component using a union &. This is reproducible on v7.2.0 and earlier. Minimally reproducible example:

// @flow

import React, { Component } from 'react';

type PropsA = {
  a: string,
};

type PropsB = {
  b: string,
};

type Props = PropsA & PropsB;

export default class Sample extends Component {
  props: Props;

  handleEvent = ({ value }: { value: string }) => {};

  render() {
    const { a, b } = this.props;

    return (
      <div>
        {a}{b}
      </div>
    );
  }
}

The reported errors are:

  21:13  error  'a' is missing in props validation                          react/prop-types
  21:16  error  'b' is missing in props validation                          react/prop-types

No ESLint errors are generated if value is not Flow-typed in the destructure:

// @flow

import React, { Component } from 'react';

type PropsA = {
  a: string,
};

type PropsB = {
  b: string,
};

type Props = PropsA & PropsB;

export default class Sample extends Component {
  props: Props;

  handleEvent = ({ value }: Object) => {};

  render() {
    const { a, b } = this.props;

    return (
      <div>
        {a}{b}
      </div>
    );
  }
}

Further, no errors are generated if the destructure typing is preserved, but the union typing is removed in favor of a single object:

// @flow

import React, { Component } from 'react';

type Props = {
  a: string,
  b: string,
};

export default class Sample extends Component {
  props: Props;

  handleEvent = ({ value }: { value: string }) => {};

  render() {
    const { a, b } = this.props;

    return (
      <div>
        {a}{b}
      </div>
    );
  }
}
@LINKIWI
Copy link
Author

LINKIWI commented Aug 13, 2017

@pfarejowicz FYI

@jseminck
Copy link
Contributor

Hi @LINKIWI - I have opened a PR for this. Could you test it out on your code and see if it works for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants