Не работает компонент Input в React из-за useForm

Question

Всем привет! Когда заполняю данные формы, без компонента Input, то всё работает отлично. Вот пример кода где всё работает:

Но после того как я сделал из input компонент и вставляю его в разметку, то у меня данные формы поля email становятся undefined

Сам Input компонент в других местах кода работает нормально

Я предполагаю что это из-за функции register от хука useForm что я передаю в компонент Input в ref. А как можно её перенести в Input не знаю, простой передачей ref не работает

целый модуль:

Answer 1

ref нельзя просто так передавать в функциональный компонент, для этого нужно его завернуть в функцию React.forwardRef

import React, { memo } from "react";
const Input = React.forwardRef(({ type, id, checked, onChange, name },ref) => {
  return <input 
    type={type} 
    id={id}
    checked={checked}
    onChange={onChange} 
    name={name} 
    ref={ref} />;
});

export default memo(Input);

БЛОГ НА HUSL

Не работает компонент Input в React из-за useForm

Ответы (1 шт):