How should I deal with arrays of numbers with zeros in it?

[mcleantom]

I have a basic form where the code for it is using react-hook-form and looks like:

import "./styles.css";
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { useState } from 'react';

const defaultValues = {
  "foo": [
    {
      "bar": [0, 0, 0]
    },
    {
      "bar": [4, 5, 6]
    }
  ]
}


const FooComponent = ({fooIndex, control}) => {
  const { fields, append, remove } = useFieldArray({
    control,
    name: `foo.${fooIndex}.bar`,
    keyName: 'id'
  });

  return (
    <div>
      <h1>Foo</h1>
      {fields.map((field, index) => (
        <Controller
          key={field.id}
          name={`foo.${fooIndex}.bar.${index}`}
          control={control}
          defaultValue={String(field.value)} // Convert to string
          render={({field}) => (
            <input {...field} value={String(field.value)} /> // Ensure the value is a string
          )}
        />
      ))}
    </div>
  )
};


export default function App() {
  const { control, handleSubmit, getValues } = useForm({
    defaultValues
  });
  const [formValue, setFormValue] = useState(null);

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'foo',
    keyName: 'id'
  });

  const onSubmit = async () => {

  };

  const handlePrintForm = () => {
    setFormValue(getValues())
  };

  return (
    <div className="App">
      <div>
        <h1>Form value:</h1>
        <p>{JSON.stringify(formValue, null, 2)}</p>
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        {fields.map((field, index) => (
          <div key={field.id}>
            <FooComponent fooIndex={index} control={control}/>
          </div>
        ))}
        <button onClick={(()=>append({'bar': [1, 2, 3]}))}>Add Foo</button>
      </form>
      <button onClick={handlePrintForm}>Print form</button>
    </div>
  );
}

When there is an array with zero-values in it, the form displays the number of zeros in the array, fewer than it should. For instance, with an array of all zeros nothing gets shown:

Whereas an array with [0, 1, 2]:

How can I fix this? One thing I noticed is that if I turned the numbers into strings, then zeros are rendered fine:

But as my form is being initialized from an API call, I would rather not have to find every number field and convert them to strings. Is there another way around this? I saw in this discussion, flat field arrays are not allowed, but I wasnt sure what was meant by a flat field array, I would guess that means arrays with false-y values in them? In my case, as I am using numbers I should never end up with an empty string, so is there a way for me to easily be able to convert the values to a string as the input is being rendered?

Thanks for any help.

codesandbox link

[mcleantom]

I dont think its possible. I have to write a new type along the lines of:

type FormValues = {
 foo: {
    bar: {
      value: number
     }[]
  }[]
}

And write a function to convert to and from the UI type and the type expected by my API.