React: How to implement the react-hook-form in my reusable input component

Question

I created a user login using my Reusable Input Component. I having an issue with how I can implement my validation using react-hook-form 6.

login.js

const { register, handleSubmit, errors } = useForm({
    mode: 'onSubmit',
    reValidateMode: 'onClick',
    defaultValues: {
      username: '',
      password: '',
    }
  });

<form
        noValidate
        onSubmit={handleSubmit(onSubmit)}
      >
        <InputField
          type='text'
          placeholder='Email or Username'
          name='username'
          value={userInfo.username}
          onChange={handleChange}
          inputRef={register({
            required: 'You must provide a title.',
          })}
        />
        {errors.username && (
          <span className='text-red-900'>{errors.username.message}</span>
        )}
        <Button type='submit' caption='Sign In' />
      </form>

components/InputField.js

const InputField = ({ value, label, name, placeholder, type, onChange }) => (
  <div className='form-group w-full'>
    {label && <label htmlFor='input-field'>{label}</label>}
    <input
      type={type}
      value={value}
      name={name}
      className='bg-customBlack-light w-full text-xs p-4 mb-6 rounded-md outline-none transition duration-150 ease-in-out'
      placeholder={placeholder}
      onChange={onChange}
    />
  </div>
);

Kirisanth Senthilnathan · Accepted Answer · 2021-05-09 11:26:21Z

import React, { useState } from 'react";

const Login = () => {
    const [errors, setErrors] = useState({});
    const [userInfo, setUserInfo] = useState({});

    const handleSubmit = () => {
    if(!userInfo.username || userInfo.username.length === 0){
            errors["username"] = {
                isError: true,
                message: "Enter User Name"
            }
            setErrors{...errors};
        }
    };

    const handleChange = (e) => {
        // set userInfo state
        userInfo["username"] = e.targe.value;
        setUserInfo({...userInfo});

        // clear the userName error
        errors["username"] = {};
        setErrors{...errors};
    };

    return(
        <form
            noValidate
            onSubmit={handleSubmit(onSubmit)}
        >
            <InputField
                type='text'
                placeholder='Email or Username'
                name='username'
                value={userInfo.username}
                onChange={handleChange}
                inputRef={register({
                    required: 'You must provide a title.',
                })}
            />
            {errors.username && errors.username.isError && (
                <span className='text-red-900'>{errors.username.message}</span>
            )}
            <Button type='submit' caption='Sign In' />
        </form>
    );
}

Princewill Iroka · Accepted Answer · 2021-05-09 10:38:56Z

0

This is a simple example:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

You can see get more info from the react-hook-form documentation: https://react-hook-form.com/get-started

answered May 9, 2021 at 10:38

Princewill Iroka

5461 gold badge7 silver badges18 bronze badges

1 Comment

rjc30 Over a year ago

I'm using react-hook-form 6

Collectives™ on Stack Overflow

React: How to implement the react-hook-form in my reusable input component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related