Advertisement

data undefined in React Hook Form inside a NPM input fields

javascript react-hooks reactjs

Alexandro Pineda

asked 29 Jan, 2022

I´m using a npm of inputs plus react hooks but when i submit the data i get undefined values in my console. I tried using the default input tags and works fine, the data i send shows perfectly. Any suggestions? is it possible to work with this NPM and react hook form or should i use the default data (Something that i don´t really like to do)

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Nav from "./Navbar";
import Footer from "./Footer";
import { FormField } from 'react-form-input-fields';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useForm } from "react-hook-form";
import { faEye,faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import 'react-form-input-fields/dist/index.css';
function Login() {

  const {register, handleSubmit } = useForm();
  const eye = <FontAwesomeIcon icon={faEye} />
  const closeEye = <FontAwesomeIcon icon={faEyeSlash} />
  const [passwordShown, setPasswordShown] = useState(false);
  let [email, setEmail] = useState("");
  let [password, setPassword] = useState("");

  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  };

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <div className="page-container">
      <div className="content-wrap">
        <Nav />
        <div className="div-login-form">
        <h1 className="title">Login</h1>
        <form className="login-form" onSubmit={handleSubmit(onSubmit)}>
          <FormField
            type="email"
            standard="labeleffect"
            value={email}
            keys={'email'}
            name="email"
            effect={'effect_1'}
            handleOnChange={(value) => setEmail(value)}
            {...register("email")}
            placeholder={'Enter Email'} />
            <div className="input-password">
            <div className="icon-eye"> 
            <i onClick={togglePasswordVisiblity} className="icon"> {passwordShown ? eye : closeEye} </i>
            </div>
            <FormField
            type={passwordShown ? "text" : "password"}
            standard="labeleffect"
            value={password}
            keys={'password'}
            name="password"
            effect={'effect_1'}
            handleOnChange={(value) => setPassword(value)}
            {...register("password")}
            placeholder={'Enter Password'} />
            </div>
            <button className="button-shop" type="submit">
              Log in
            </button>
        </form>
        </div>

      </div>
      <Footer />
    </div>
  );
}

export default Login;

Advertisement

Answer

You’re not passing anything into your onSubmit function.

Rewrite it to something like this with your current setup:

onSubmit={() =>
  handleSubmit(onSubmit({ email: email, password: password }))
}

Here’s a minimal sandbox example

Aside

By the way, NPM is a package manager, not a component or element provider like you’re referring to it by. Check out the useState docs for a good intro to states and React development.

Advertisement