reactjs

React Login Form errors

I Have a simple login form Just Username and Password.

I have few errors on build. I'm not sure what I'm missing. How do I fix this? sorry my react is just basic.

import React from "react";
 

export default function LoginForm({ onSubmit }) {

this.state = { username: '', password: '' };
handleUsernameChange = (event) => this.setState({ email: event.target.value });
handlePasswordChange = (event) => this.setState({ email: event.target.value });

handleSubmitButton = () => {
    const { username, password } = this.state;
    const { onSubmit } = this.props;

    onSubmit(username-input, username-password);
  };
    return (
      <form>
        <div className="form-group">
            <input type="text" onChange={handleUsernameChange} id="username-input" placeholder="Username"/>
        </div>
        <div className="form-group">
            <input type="password" onChange={handlePasswordChange} id="password-input" placeholder="Password"/>
        </div>

        <button type="submit" onClick={onSubmit(username-input, password-input)}>Submit</button>

      </form>
    );
 
}
const mapDispatchToProps = dispatch => ({
    onSubmit: (username, password) => {
      dispatch(signup(username, password));
    },
});
mapDispatchToProps(LoginForm);

errors:

 Line 9:1:    'handleUsernameChange' is not defined  no-undef
  Line 10:1:   'handlePasswordChange' is not defined  no-undef
  Line 12:1:   'handleSubmitButton' is not defined    no-undef
  Line 16:23:  'input' is not defined                 no-undef
  Line 21:42:  'handleUsernameChange' is not defined  no-undef
  Line 24:46:  'handlePasswordChange' is not defined  no-undef
  Line 27:49:  'username' is not defined              no-undef
  Line 27:58:  'input' is not defined                 no-undef
  Line 27:65:  'password' is not defined              no-undef
  Line 27:74:  'input' is not defined                 no-undef
  Line 35:16:  'signup' is not defined                no-undef
Solution

  • State is immutable, so you're basically setting it to be an object containing only email when you handle the change. You should store each element in its own state, and then handle the disabled button state by implemetning the useEffect() hook.

    Here's a refactored version (you'll need to handle the dispatching to your Redux store yourself, since we don't know if you're using Thunk or something similar as middleware):

    import React, { useState, useEffect } from 'react';
 
const LoginForm = (props) => {
    const [ username, setUsername ] = useState('');
    const [ password, setPassword ] = useState('');
    const [ buttonDisabled, setButtonDisabled ] = useState(true);

    const handleSubmit = () => {
        dispatch(signup(username, password));
    };

    useEffect(() => {
        setButtonDisabled(
            ! (username !== '' && password !== '')
        );
     }, [ username, password ]);

    return (
        <form>
            <div className="form-group">
                <input 
                    type="text" 
                    onInput={(e) => setUsername(e.target.value)} 
                    id="username-input" 
                    placeholder="Username"
                    value={ username }
                />
            </div>
            <div className="form-group">
                <input 
                    type="password" 
                    onInput={(e) => setPassword(e.target.value)}
                    id="password-input" 
                    placeholder="Password"
                    value={ password }
                />
            </div>

            <button 
                disabled={ buttonDisabled }
                type="submit" 
                onClick={ handleSubmit }
                value="Submit"
            />
      </form>
    );
};

export default LoginForm;