(React) How can I convert Class to Function (Stuck)?

I have this code and wanted to convert to Functional Component. I’ve tried with setState and when I click login, it just reloads the login page.

class Login extends Component {
  state = {
    login: '',
    password: '',
    keepLogged: false
  };

  changeValue = event => {
    event.preventDefault();
    const value = event.target.value;
    const name = event.target.name;

    this.setState({
      [name]: value
    });
  };

  checkedValue = event => {
    console.log(event.target.checked, event.target.name);
    const value = event.target.checked;
    const name = event.target.name;

    this.setState({
      [name]: value
    });
  };

  loginUser = () => {
    const { login, password } = this.state;
    const { requestSignIn } = this.props;

    requestSignIn({ login, password });
  };

  render() {
    const { login, password } = this.state;

    return (
      <LoginWrapper>
        <Containe}>
          <Row>
            <Col>
              <LoginForm>
                <FormControl
                  name='login'
                  type='text'
                  placeholder='Username/Email'
                  value={login}
                  onChange={this.changeValue}
                  style={{ marginBottom: '10px' }}
                />
                <FormControl
                  name='password'
                  type='password'
                  placeholder='Password'
                  value={password}
                  onChange={this.changeValue}
                  style={{ marginBottom: '10px' }}
                />
                <Button
                  variant='info'
                  value='Log In'
                  onClick={() => this.loginUser()}
                >
                  Log In
                </Button>
              </LoginForm>
            </Col>
          </Row>
          <Row>
            <Col>
              <LoginBottom
                onClick={() => history.push('/registration')}
                style={{ marginTop: '30px' }}
              >
                Need an account?{' '}
                <Link style={{ color: '#007bff' }}>Sign Up</Link>
              </LoginBottom>
            </Col>
          </Row>
        </Container>
      </LoginWrapper>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  requestSignIn: data => dispatch(requestSignIn(data))
});

export default connect(null, mapDispatchToProps)(Login);

This is how far I am right now. And, it does not work.

function Login(props) {
  const classes = useStyles();
  const [inputs, setInputs] = useState({
    // you can login with email or username
    login: '',
    password: '',
    keepLogged: false
  });

  const { login, password } = inputs;

  function handleChange(e) {
    event.preventDefault();
    const { name, value } = e.target;
    setInputs(inputs => ({ ...inputs, [name]: value }));
  }

  function handleCheck(e) {
    console.log(e.target.checked, e.target.name);
    const { name, value } = e.target.check;
    setInputs(inputs => ({ ...inputs, [name]: value }));
  }

  const loginUser = () => {
    const { login, password } = this.state;
    const { requestSignIn } = this.props;

    requestSignIn({ setInputs });
  };

  return (
    <LoginWrapper>
    <Container>
      <Row>
        <Col>
          <LoginForm>
            <FormControl
              name='login'
              type='text'
              placeholder='Username/Email'
              value={login}
              onChange={handleChange}
            />
            <FormControl
              name='password'
              type='password'
              placeholder='Password'
              value={password}
              onChange={handleChange}
            />
            <Button
              variant='info'
              value='Log In'
              onClick={() => this.loginUser()}
            >
              Log In
            </Button>
          </LoginForm>
        </Col>
      </Row>
      <Row>
        <Col>
          <LoginBottom
            onClick={() => history.push('/registration')}
            style={{ marginTop: '30px' }}
          >
            Need an account?{' '}
            <Link style={{ color: '#007bff' }}>Sign Up</Link>
          </LoginBottom>
        </Col>
      </Row>
    </Container>
  </LoginWrapper>
  );
}

const mapDispatchToProps = dispatch => ({
  requestSignIn: data => dispatch(requestSignIn(data))
});

export default connect(null, mapDispatchToProps)(Login);

What have I missded from here?!

For starters, event.preventDefault(): there’s no variable called event passed into that handler function

Oh, so I need to change event.prventDefault() -> e.preventDefault()?

Yep, you’ve called the parameter e, not event.

1 Like