RealLifeExample.jsx

/* @flow */

import React, { Component } from 'react';

...

type State = {
  passwordVisable: boolean,
  email: string,
  password: string,
  loginPending: boolean
};

type Props = {
  history: Object,
  match: Object,
  login: ({ email: string, password: string }) => Promise<*>,
  googleLogin: ({ googleToken: string }) => Promise<*>
};

class LoginForm extends Component<Props, State> {

  ...

  render() {
    const { match } = this.props;
    const {
      passwordVisable,
      email,
      password,
      loginPending
    } = this.state;

    return (
      <Container>
        <HeaderContainer>
          <H3 fontFamily="bold">Log in to your account</H3>
          <br />
          <P fontFamily="medium">
            You can use your Diagnostic Questions credentials :)
          </P>
        </HeaderContainer>
        <form onSubmit={e => this.handleLogin(validate, e)}>
          <Input
            underline
            value={email}
            onChange={e => this.handleChange('email', e)}
            placeholder="Email / username"
            autoFocus
          />
          <Input
            underline
            value={password}
            onChange={e => this.handleChange('password', e)}
            type={passwordVisable ? 'text' : 'password'}
            placeholder="Password"
            iconName={passwordVisable ? 'eyeOn' : 'eyeOff'}
            onIconClick={() =>
              this.setState(state => ({
                passwordVisable: !state.passwordVisable
              }))}
          />

          <FooterContainer>
            <ForgotLink
              onClick={() => {
                this.props.history.push(`${match.url}/forgot-password`);
              }}
            >
              <TextS color="gray5">I forgot my password</TextS>
            </ForgotLink>
            <Container>
              <Button
                type="submit"
                onClick={e => this.handleLogin(validate, e)}
                loading={loginPending}
              >
                Log in
              </Button>
            </Container>
          </FooterContainer>
        </form>
      </Container>
    );
  }
}

...

export default LoginForm;