Bug: react/prop-types fails to parse destructured Flow typing with Flow union type #1364
Closed
Description
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>
);
}
}
Activity