How to register a field in object without actually rendering it as input

[khanakia]

How do i register a field without actually rendering as input.
For example i want to create a isDeveloper field but i do not want to render it as a input. but still i want to get the value of that field

Sandbox Link: https://codesandbox.io/s/react-hook-form-defaultvalues-v6-forked-u3k4z?file=/src/index.js

import "./styles.css";

function App() {
  const { register, handleSubmit, getValues } = useForm({
    defaultValues: {
      firstName: "bill",
      isDeveloper: true
    }
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(getValues()));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">First Name</label>
      <input name="firstName" placeholder="bill" ref={register} />

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Actual Output

{"firstName":"bill"}

Expected Output

{"firstName":"bill", "isDeveloper" : true}

[bluebill1049]

useEffect(() => {
 register('xxx', 'value')
}, [register])

[BLuEScioN]

@bluebill1049 I tried this approach, but it doesn't work. My situation is a little different. Under one set of conditions I am rendering the field in a Controller component, in another, I am not rendering it. In the later case, I am trying this approach and it's not working. The form store seems to manipulate that state, changing the state value from an instance of OrderedSet to an object, which causes my code to error further downstream. What's working for me is
if (condition) { register('field') }
Will this an ok approach to take, or is there something better? As I stated before, this
useEffect(() => { register('xxx', 'value') }, [register])
did not work for me

[bluebill1049]

it's fine with your solution with the conditional call register.

[nik32]

@bluebill1049 will this work if value is dynamic. i.e. something like -

const [value, setValue] = useState('value_string');
useEffect(() => {
register('xxx', value)
}, [register, value])

It seem not to work, as 'xxx's value is set only on the first run of useEffect [I guess subsequent values are being ignored]. What could be the solution for my case??

[nik32]

or just do this: https://codesandbox.io/s/xenodochial-knuth-n3fqmw?file=/src/App.js

import * as React from "react";
import { useForm } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";

let renderCount = 0;

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
  const [value, setData] = React.useState("");
  const onSubmit = (data) => console.log(data);
  renderCount++;

  register("test");

  React.useEffect(() => {
    setValue("test", value);
  }, [value, setValue]);

  return (
    <div>
      <Headers
        renderCount={renderCount}
        description="Performant, flexible and extensible forms with easy-to-use validation."
      />

      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
        <button
          type="button"
          onClick={() => {
            setData(Math.random());
          }}
        >
          test
        </button>
        <input type="submit" />
      </form>
    </div>
  );
}

@bluebill1049 just for my knowledge, in the 2nd option - is it necessary to call register('test')?? And if so then why?? I tried without it and the code was still working. Just had the concern as it is will be called again and again on any re-render

[bluebill1049]

It's fine if you are sure that's not going to be an actual input/field.

[tgwasira]

@bluebill1049 Would you recommend using this to integrate with Lexical like so:

export default function ReactHookFormPlugin({ name, register, setValue }) {
  const [editor] = useLexicalComposerContext();

  register(`${name}EditorStateJSONString`);
  register(`${name}EditorStatePlainText`);

  useEffect(
    () =>
      editor.registerUpdateListener(({ editorState }) => {
        editorState.read(() => {
          const editorStateJSONString = JSON.stringify(editorState.toJSON());
          const editorStateTextString = $getRoot().getTextContent();

          setValue(`${name}EditorStateJSONString`, editorStateJSONString);
          setValue(`${name}EditorStatePlainText`, editorStateTextString);
        });
      }),
    [editor, name, setValue]
  );
}

[Moshyfawn]

Would you recommend using this to integrate with Lexical like so:

I think Lexical is a controlled input. It's probably best to use Controller to handle it.

[tgwasira]

Thanks @Moshyfawn . Found an answer on StackOverflow to help me do that.