Is there anyway to disable Register name from making arrays?

[werdz-io]

I'm trying to submit a MailChimp form that uses brackets for its checkbox names. For example: group[34498][2]
According to this page: https://react-hook-form.com/api/useform/register/#rules it seems like it takes the string name and interprets it as an array if there are . or []. I'm sure that's useful in some situations but in this case, it's preventing me from submitting the form I need. Is there anyway around this issue?

[leapful]

@werdz-io

Please provide a codesandbox url to re-produce the issue. Since it's really hard to find a workaround without knowing group[34498][2] is a array field item or just a single field item.

[werdz-io]

Hi, It's a single field item. Each checkbox is named something like: "group[34498][2]" "group[34498][4]" "group[34498][6]" etc. However, when I submit as that, it fails. Looking on the network tab, I can see that the request is treated like an array instead of a string name. I'm not sure if there's a way to escape that or some other method. When I enter the exact info into Postman, it works fine. it's just when submitting via react-hook-form that it's treated as an array instead of a string.

[werdz-io]

The checkbox form piece looks like this:

<label key='group[34498][2]'>
   <input
   key='group[34498][2]'
   type="checkbox"
   value='1'
   name='group[34498][2]'
   {...register('group[34498][2]', {required: false})}
   />
Item1</label>

The submit handling works like this

let onSubmit = async (data) => {
    try {
      let res = await fetch("https://myMailChimpAcct/subscribe?u=blah&id=blah", {
        method: "POST",
        mode: "no-cors",
        headers: { 'Content-Type': 'application/json;charset=utf-8' },
        body: JSON.stringify({
          data
        }),
      });

I've tried different variations of header types (e.g. multipart/form-data) and body submission but it doesn't matter. Is there a way to prevent the checkbox string name with brackets from being interpreted as an array by react-hook-form?

[leapful]

@werdz-io

Since those fields are just single field data, you can register field name with other unique character as delimiter, like _, instead of ., then replace it . again when submitting with JSON.parse and JSON.stringify.

// Register field name

<input {...register("group_34498_2")} />

// Transform on submit

onSubmit={handleSubmit((data) => {
        const test = JSON.parse(JSON.stringify(data), function (key, value) {
          if (key.indexOf("_") > -1) {
            this[key.replace(/_/g, ".")] = value;
            return undefined;
          }

          return value;
        });
      })}

For example: https://codesandbox.io/s/friendly-albattani-h5k3tp?file=/src/App.tsx

[werdz-io]

Interesting. Thank you, I'll give it a shot and report back.