Unform: TypeError: Cannot read property 'Nome' of undefined usando JS

[regisrc]

Codigo do input:
import React, { useEffect, useRef, useState, useCallback } from 'react';

import { FiAlertCircle } from 'react-icons/fi';
import { useField } from '@unform/core';

import { Container, Label, InputContainer, Error } from './styles';

const FormInput = ({
label,
name,
containerStyle = {},
icon: Icon,
...rest
}) => {
const { fieldName, defaultValue = "", error, registerField } = useField(name);
const inputRef = useRef(null);

const [isFocused, setIsFocused] = useState(false);
const [isFilled, setIsFilled] = useState(false);

const handleInputFocus = useCallback(() => setIsFocused(true), []);

const handleInputBlur = useCallback(() => {
setIsFocused(false);

setIsFilled(!!inputRef.current?.value);

}, []);

useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: 'value',
});
}, [fieldName, registerField]);

return (


data-testid={input-container-${name}}
style={containerStyle}
isErrored={!!error}
isFilled={isFilled}
isFocused={isFocused}
>
{Icon && }
name={name}
onFocus={handleInputFocus}
onBlur={handleInputBlur}
defaultValue={defaultValue}
ref={inputRef}
{...rest}
/>

    {error && (
      <Error title={error}>
        <FiAlertCircle color="#c53030" size={20} />
      </Error>
    )}
  </InputContainer>
</Container>

);
};

export default FormInput;

Codigo que chama:
import React from 'react';

import FormInput from '../FormInput';
import { Container } from './styles';

const Profile = () => {
return (



);
};

export default Profile;

[mateushnsoares]

Hey @FERegis, Please follow the guidelines described here.

While contributing or interacting in any way in this project, refrain from using any language other than English.

I can't close it but I can request that you change to English

[regisrc]

Ok sorry for this, but basically im having this error: TypeError: Cannot read property 'Nome' of undefined. So i was guessing that error was caused because i had typescript installed in the project, but i removed and it keep the same error. The error is in
const { fieldName, defaultValue = "", error, registerField } = useField(name);

[carlosallexandre]

Hey @FERegis,

This error is happening because you must use the input inside the form.
It is not possible to use the input outside the form with unform.

Check below:

import React from 'react';
import { Form } from '@unform/web';
import Input from './components/Input';

export default function SignIn() {
  function handleSubmit(data) {
    // do something when form is submitted
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="email" type="email" />
      <Input name="password" type="password" />

      <button type="submit">Sign in</button>
    </Form>
  );
}

[regisrc]

Omg, this is looking beautiful, thanks for the help

[Ronkiro]

Got this problem with a different solution. if you are using redux, check if your reducers' case is related to unform in some way, and if so, check if there aren't any wrong logics. :)