How i can typed event in handleSumbit?

SeeYou1ater 0
Viewed 17

I don't quite understand how to do typing in handleSubmit?

The "password" property does not exist in the "EventTarget" type. The "email" property does not exist in the EventTarget type.

import { FormEvent, useState } from "react"
import { NavLink } from "react-router-dom"
import { useAppDispatch, useAppSelector } from "../../../hooks"
import { loginThunkCreator } from "../../../redux/appReducer"
import Menu from "../../common/Menu"
import './Login.css'


const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const dispatch = useAppDispatch()

  const isAuth = useAppSelector( state => state.isAuth)

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    const dataSubmit = { 
      email: e.target.email.value,
      password: e.target.password.value
    }
    dispatch(loginThunkCreator(dataSubmit))
  }
  if (isAuth) { return <div className="already-auth-form">
                          <Menu/> 
                          <div><p>You are already authorized!</p></div>
                        </div>
  } else return (
    <div>
      <p className="menu"><NavLink to="/*">Menu</NavLink></p>
      <form action="" onSubmit={handleSubmit} className='login-form form'>
        <h2 className="form-title">Login</h2>
        <input className='login-form__input-email input-form' type="text" name='email' placeholder='email' value={email} onChange={(e) => setEmail(e.target.value)}/>
        <input className='login-form__input-password input-form' type='password' name='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
        <button className="login-buton form-button">Log in</button>
        <p className="login_no-account">Doesn't have account? <NavLink to="/register">Register</NavLink></p>
      </form>
    </div>
  )
}

export default Login
reactjs typescript
1 Answers

no need to get it from event.target in the submit handler, and also the event you are passing in the submit handler doesn't contain target prop, and since you already set the values of email and password via change handler, then just use your state :

const handleSubmit = (e: FormEvent) => {
        e.preventDefault()
        const dataSubmit = { 
          email, // instead of : email: e.target.email.value
          password // instead of : e.target.password.value
        }
        dispatch(loginThunkCreator(dataSubmit))
      }
Shadi Amr0
Related