Having a Component with its props, an additional prop is added for getDerivedStateFromProps. The issue arises when setting the props with the additional one, throwing an error that the prop is not being used. Conversely, setting it without the extra prop causes an error indicating that a prop which does not exist in the component props cannot be included:
type Props = {|
name: string,
|};
type StaticProps = {|
...Props,
surname: string,
|};
type State = {|
name: string,
surname: string,
|};
export class Foo extends Component<Props, State> {
state: State = {
name: '',
surname: '',
};
static getDerivedStateFromProps(props: StaticProps) {
return { surname: props.surname };
}
render() {
return (
<div>
<div>{this.props.name}</div>
<div>{this.state.surname}</div>
</div>
);
}
}
In this scenario, Flow type raises an error:
Cannot create 'Foo' element because property 'surname' is missing in 'Props' [1] but exists in props [2].Flow(InferError)When using
Component<StaticProps, State>'surname' PropType is defined but prop is never usedeslint(react/no-unused-prop-types)What would be the correct way to define the flow types for this situation?