How to get data React UseForm

MrRobot 0
Viewed 28

I'm new to React and still am trying to make sense of a few things. I'm using the react-form-dom library and after looking into the documentation I can't figure out what's going on with my project.

I have created a custom input component that takes in a few parameters. The problem is that when I try to log the value of the inputs I get undefined.

Input.jsx

import React, { useState } from 'react';


import './Input.scss';

export default function Input(props, {register, errors}) {
    const [inputVal, setInputVal] = useState('');

    const nameChange = (e) => {
        setInputVal(e.target.value);
        props.nameChange(e.target.value);
    }

    const legend = <span className='legend'>{props?.legend}</span>;
    const showLength = <span className='legend'>{props.maxLength - inputVal.length}</span>;

    return (
        <div className="input-holder">
            <input
                ref={register}
                type={props.type || 'text'}
                id={props.id}
                placeholder={props.placeholder}
                value={inputVal}
                onInput={nameChange}
                maxLength={props.maxLength || ""}
            />
            { props.legend ? legend : null}
            { props.showLength && props.maxLength ? showLength : null }
            
        </div>
    )
}

Form.jsx

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

import Button from './Button';
import Input from './Input';

export default function UserForm(props) {
    const { register, handleSubmit } = useForm();

    function submitForm(data) {
        console.log(data)
    }

    return (
        <div className="user-form">
            <form onSubmit={handleSubmit(submitForm)}>
                <Input
                    placeholder="Name"
                    nameChange={(name) => props.userName(name)}
                    showLength="true"
                    maxLength="35"
                    legend="Remaining Char: "
                    id="name"
                    register={register}
                />
                <Input
                    placeholder="E-mail"
                    type="email"
                    id="email"
                    register={register}
                />

                <Button label="Buy" />
            </form>
        </div>
    )

}
react-forms react-hooks reactjs
1 Answers

It seems that you are using react-hook-form

Checkout the example here

The onChange you are passing to the input tags are no longer needed with react-hook-form beacuse of register functionality of react-hook-form also validations will be done react-hook-form

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

export default function UserForm(props) {
    const { register, handleSubmit } = useForm();

    const submitForm = (data) => {
        console.log(data);
    }

    const onError = (err) => {
        console.error(err);
    }

    return (
        <div className="user-form">
            <form onSubmit={handleSubmit(submitForm, onError)}>
                <input
                   {...register("name", { //handles onChange, value, name, ref
                      maxLength: 35 // Your validations
                    })}  
                />
                <button>Buy</button>
            </form>
        </div>
    )

}

Checkout docs for register

Form File Example

Tushar Mistry0
Related