score:2

Accepted answer

How about this, does this work, it keeps the array brackets and doesnt have the null.

Maybe since the map index increases, the nestedArray filters for the value that is in the current map index but since it hasn't gone to the next index it creates a null for that iteration.

Code: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-9sxrt?file=/src/fieldArray.js:302-1778

      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label> single input </label>
              <input
                name={`test[${index}].task`}
                ref={register()}
                defaultValue={item.task}
              />
              <br />
              <label> first Name </label>
              <input
                name={`test[${index}].name.first`}
                ref={register()}
                defaultValue={item.name.first}
              />
              <br />
              <label>last Name </label>
              <input
                name={`test[${index}].name.last`}
                ref={register()}
                defaultValue={item.name.last}
              />
              <br />

              <label>First Nested </label>
              <input
                name={`test[${index}].nestedArray[0].firstNested`} //changed index to 0
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

              <br />
              <label> Second Nested </label>
              <input
                name={`test[${index}].nestedArray[0].secondNested`} //changed index to 0
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />
              <br />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>

score:1

Let me know if this works. Maybe you didnt need to index the nestedArray since its been mapped. It worked in the console for me without the null. I think since you already targetted "test" with:

`test[${index}].nestedArray.firstNested`

you might not need to index the nestedArray also?

      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label> single input </label>
              <input
                name={`test[${index}].task`}
                ref={register()}
                defaultValue={item.task}
              />
              <br />
              <label> first Name </label>
              <input
                name={`test[${index}].name.first`}
                ref={register()}
                defaultValue={item.name.first}
              />
              <br />
              <label>last Name </label>
              <input
                name={`test[${index}].name.last`}
                ref={register()}
                defaultValue={item.name.last}
              />
              <br />

              <label>First Nested </label>
              <input
                name={`test[${index}].nestedArray.firstNested`} //removed index
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

              <br />
              <label> Second Nested </label>
              <input
                name={`test[${index}].nestedArray.secondNested`} //removed index
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />
              <br />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>


Related Query

More Query from same tag