Search code examples
reactjsflowtypeflow-typed

flow - cannot extend 'Component' with 'Home' because object literal [2] is incompatible with undefined [3] in property 'state

I'm trying to use Flow with the react, I followed some tutorials but I can not solve this error, my code looks like this:

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";

import { login } from "../../services/auth";
import api from "../../services/api";
import { getToken } from "../../services/auth";

import type { RouterHistory } from "react-router-dom";

type State = {
    username: number,
    password: string,
    history: RouterHistory,
}

class Home extends Component < State > {
    handleChange = this.handleChange.bind(this);
    handleSignIn = this.handleSignIn.bind(this);

    state = {
        username: '',
        password: '',
        history: '',
    };

the error appears in the state within the component.

EDIT 1: adding: 

...
type Props = {/ * ... * /};
...
class Home extends Component <Props, State>

It worked! But would you like to understand why?

Solution

  • In the React flow definitions, the generic type arguments for a component are Props first and then state. So as you noticed, supplying the Props type first and then state is what you want to do.