React: usereducer

 LOGIN.js

Globally

const emailReducer = (state, action) => {

  if (action.type === 'USER_INPUT') {

    return { value: action.val, isValid: action.val.includes('@')};

  }

  if (action.type === 'INPUT_BLUR') {

    return { value: state.value, isValid: state.value.includes('@') };

  }

  return { value: '', isValid: false };

};

Inside Login Function

const [emailState, dispatchEmail] = useReducer(emailReducer, {

    value: '',

    isValid: null,

  });

const emailChangeHandler = (event) => {

    dispatchEmail({type: 'USER_INPUT', val: event.target.value});

    setFormIsValid(

      event.target.value.includes('@') && enteredPassword.trim().length > 6

    );

  };

  

    const validateEmailHandler = () => {

    dispatchEmail({type: 'INPUT_BLUR'});

  };

  

  

  

  const submitHandler = (event) => {

    event.preventDefault();

    props.onLogin(emailState.value, enteredPassword);

  };

  

  

  

  

  return (

    <Card className={classes.login}>

      <form onSubmit={submitHandler}>

        <div

          className={`${classes.control} ${

            emailState.isValid === false ? classes.invalid : ''

          }`}

        >

          <label htmlFor="email">E-Mail</label>

          <input

            type="email"

            id="email"

            value={emailState.value}

            onChange={emailChangeHandler}

            onBlur={validateEmailHandler}

          />

        </div>