Get input ref with uncontrolled form

[fjuriolli]

Sandbox below: https://codesandbox.io/s/react-79dbg?fontsize=14&hidenavigation=1&theme=dark

The code from sandbox I have a simple uncontrolled form but I need to show the input somewhere else, like this with a controlled form:

const [name, setName] = useState('')

<input
    name="name"
    variant="outlined"
    placeholder="Please type the channel name"
    value={name}
    ref={register}
    onChange={e => setName(e.target.value)}
/>

<span>This is a {name}</span>

What is the most recommended way to do this with a uncontrolled form?

[bluebill1049]

Hey @fjuriolli i am not clear on what you are after in here, can you explain a bit more?

[fjuriolli]

Hey @fjuriolli i am not clear on what you are after in here, can you explain a bit more?

Sure. In my sandbox, I have the an uncontrolled input:

<RHFInput
    as={<TextField placeholder="Type your first name" fullWidth={true} />}
    style={{ marginBottom: "15px" }}
    register={register}
    setValue={setValue}
    name="firstName"
/>

I need to take the input value and show it on a for example, like this:

<span>This is the value of the input is {inputValue}</span>

[bluebill1049]

you can't use watch api?

[fjuriolli]

you can't use watch api?

Silly me, I just needed to add inputRef={register} to my TextField