Complex Structures

With React Cool Form you can use dot-and-bracket notation as the name of a field to create arbitrarily deeply a fields. It's very similar to Lodash's _.set method.

tip

Setting undefined as a field value deletes the field data from the structure (see related doc).

Name	Current structure	Value	Result
foo	{ }	"rcf"	{ foo: "rcf" }
foo.bar	{ }	"rcf"	{ foo: { bar: "rcf" } }
foo[0]	{ }	"rcf"	{ foo: [ "rcf" ] }
foo[1]	{ }	"rcf"	{ foo: [ empty, "rcf" ] }
foo.0	{ }	"rcf"	{ foo: [ "rcf" ] }
foo[0].bar	{ }	"rcf"	{ foo: [ { bar: "rcf" } ] }
foo	{ foo: "rcf" }	undefined	{ }
foo.bar	{ foo: { bar: "rcf" }, baz: "rcf" }	undefined	{ baz: "rcf" }
foo[0]	{ foo: [ { bar: "rcf" } ] }	undefined	{ foo: [ empty ] }

You can play around with the following example to get better understanding of how it works:

import { useForm } from "react-cool-form";
const FieldGroup = ({ name, onUpdate, onClear }) => (  <>    <input name={name} placeholder={name} />    <div>      <button type="button" onClick={onUpdate}>        Update      </button>      <button type="button" onClick={onClear}>        Clear      </button>    </div>  </>);
const App = () => {  const { form, setValue } = useForm({    defaultValues: {      foo: "",      bar: [],      baz: { a: "" },      qux: [{ a: "" }],    },    onSubmit: (values) => console.log("onSubmit: ", values),  });
  return (    <form ref={form}>      <FieldGroup        name="foo"        onUpdate={() => setValue("foo", "rcf")}        onClear={() => setValue("foo")}      />      <FieldGroup        name="bar[0]"        onUpdate={() => setValue("bar[0]", "🍋")}        onClear={() => setValue("bar[0]")}      />      <FieldGroup        name="baz.a"        onUpdate={() => setValue("baz.a", "🍉")}        onClear={() => setValue("baz.a")}      />      <FieldGroup        name="qux[0].a"        onUpdate={() => setValue("qux[0].a", "🥝")}        onClear={() => setValue("qux[0].a")}      />      <input type="submit" />    </form>  );};