CODEWITHSUNDEEP
javascriptreactjspropertiesecmascript-6flowtype
modernator
modernator

Reputation: 4427

Flow don't understand proptypes

Look at this class:

/* @flow */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
    email: ...
});

@connect(mapStateToProps)
class UserControlPanel extends PureComponent {
    static propTypes = {
        email: PropTypes.string
    }
    logout = (ev:any) => {
        ev.preventDefault();

        ...
    }
    render() {
        const { email } = this.props;

        return (
            <div className="ucp">
                ...
            </div>
        );
    }
}

export default UserControlPanel;

It's simple React Component class that accepts single string prop named email. But when I run flow, it gives me this error:

[flow] property email (Property not found in props of React element UserControlPanel See also: React element UserControlPanel)

What am I wrong? I also tried this:

type Props = {
    email: string;
};

@connect(mapStateToProps)
class UserControlPanel extends PureComponent {
    props:Props
    static propTypes = {
        email: PropTypes.string
    }

Or this:

type Props = {
    email: string;
};

@connect(mapStateToProps)
class UserControlPanel extends PureComponent<Props> {
    static propTypes = {
        email: PropTypes.string
    }

Both won't worked. Using just Component instead of PureComponent doesn't worked either.

How do I make flow understand my prop types and no more error message?

Upvotes: 0

Views: 115

Answers (1)

Jalil
Jalil

Reputation: 3168

You shouldn't use PropTypes if you are already validating your types using Flow Type.

Instead, try the following : 

/* @flow */
import * as React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
    email: ...
});

type Props = {
  email: string,
};

@connect(mapStateToProps)
export default class UserControlPanel extends React.PureComponent<Props> {
    render() {
        const { email } = this.props;

        return (
            <div className="ucp">
                ...
            </div>
        );
    }
}

Upvotes: 1

Related Questions