react-hook-form > Register時の命名による、Submit Valuesの違い



Registerにセットする名称によってSubmit Valuesの形が変わるのですが、
違いが今ひとつわかりにくかったので備忘録



## Input Text


### 文字列のみの場合

<B>Input Name</B>

```
<Input {...register("firstName")} value="steve" />
<Input {...register("lastName")} value="vai" />
```

<B>Submit Result</B>

> オブジェクトとなる

```
{ "firstName": "steve", "lastName": "vai"}
```


### 文字列.文字列

<B>Input Name</B>

```
<Input {...register("name.firstName")} value="steve" />
<Input {...register("name.lastName")} value="vai" />
```

<B>Submit Result</B>

> nameに割り当てられたオブジェクトとなる

```
{ "name": { "firstName": "steve", "lastName": "vai" } }
```


### 数値のみ

<B>Input Name</B>

```
<Input {...register("0")} value="steve" />
<Input {...register("1")} value="vai" />
```

<B>Submit Result</B>

> 配列と思いきや、オブジェクトとなる

```
{ "0": "steve", "1": "vai" }}
```



### 文字列.数字

<B>Input Name</B>

```
<Input {...register("name.0")} value="steve" />
<Input {...register("name.1")} value="vai" />
```

<B>Submit Result</B>

> 配列に格納される

```
{ "name": [ "steve", "vai" ] }
```



### 文字列.数字 (1始まりの場合)

<B>Input Name</B>

> 1始まりの場合

```
<Input {...register("name.1")} value="steve" />
<Input {...register("name.2")} value="vai" />
```

<B>Submit Result</B>

> 配列に格納されるが、0番目は`null`となる

```
{ "name": [ null, "steve", "vai" ] }
```

### 文字列.数字.文字列

<B>Input Name</B>


```
<Input {...register("name.0.firstName")} value="steve" />
<Input {...register("name.0.lastName")} value="vai" />
```

<B>Submit Result</B>

> name配列の0番目にそれぞれ格納される

```
{ "name": [ { "firstName": "steve", "lastName": "vai" } ] }
```


### 文字列.数字.文字列

<B>Input Name</B>


```
<Input {...register("name.0.firstName")} value="steve" />
<Input {...register("name.1.lastName")} value="vai" />
```

<B>Submit Result</B>


> name配列の0番目にfirstName、1番目にlastName

```
{ "name": [ { "firstName": "steve" }, { "lastName": "vai" } ] }
```



## Checkbox



### 文字列.数字

<B>Input Name</B>


```
<Checkbox value="naruto" {...register("CheckboxGroup01.0")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup01.1")}>
<Checkbox value="kakashi" {...register("CheckboxGroup01.2")} checked>
```

<B>Submit Result</B>


> 配列に格納される（未選択はfalse）

```
{ "CheckboxGroup01": [ "naruto", false, "kakashi" ] }
```



### 文字列.[数字]

<B>Input Name</B>


```
<Checkbox value="naruto" {...register("CheckboxGroup02.[0]")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup02.[1]")}>
<Checkbox value="kakashi" {...register("CheckboxGroup02.[2]")} checked>
```

<B>Submit Result</B>


> 配列に格納される（未選択はfalse）

```
{ "CheckboxGroup02": [ "naruto", false, "kakashi" ]
```




### 文字列

<B>Input Name</B>


```
<Checkbox value="naruto" {...register("CheckboxGroup03")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup03")}>
<Checkbox value="kakashi" {...register("CheckboxGroup03")} checked>
```

<B>Submit Result</B>


> 配列に格納される（選択されたものだけ格納される）

```
{ "CheckboxGroup03": [ "naruto", "kakashi" ] }
```



### 文字列

<B>Input Name</B>


```
<Checkbox value="naruto" {...register("CheckboxGroup04.a")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup04.b")}>
<Checkbox value="kakashi" {...register("CheckboxGroup04.c")} checked>
```

<B>Submit Result</B>


> オブジェクトになる

```
{ "CheckboxGroup04": { "a": "naruto", "b": false, "c": "kakashi" } }
```




以上


### Sandbox

https://codesandbox.io/s/register-name-bugil


### 参考


[react-hook-form - register](https://react-hook-form.com/jp/api/#register)