react-hook-formでデータが取得できない解決方法について

# はじめに
react-hook-formで入力したデータをコンソールで表示できなかったため、そちらの解決方法を共有します。

<br>

下記のように記述していました。

```.Register.tsx
import { Box, Card, CardBody, CardHeader, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { useForm } from "react-hook-form";

export const Register = () => {
    const { handleSubmit } = useForm();

    return (
        <div>
            <Card>
                <CardHeader>
                    <Heading size='md'>新規名刺登録</Heading>
                </CardHeader>
                <CardBody>
                    <Box>
                    <form onSubmit={handleSubmit((data) => {
                        console.log("dataの中身",data);
                    })}>
                        <FormLabel>ユーザーID</FormLabel>
                        <Input type="text" placeholder="ユーザーIDを入力してください" />
                        <FormLabel>名前</FormLabel>
                        <Input type="text" placeholder="名前を入力してください" />
                        <FormLabel>自己紹介</FormLabel>
                        <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" />
                        <FormLabel>好きな技術</FormLabel>
                        <RadioGroup >
                            <Stack direction='row'>
                                <Radio value='React'>React</Radio>
                                <Radio value='TypeScript'>TypeScript</Radio>
                                <Radio value='Github'>Github</Radio>
                            </Stack>
                        </RadioGroup>
                        <FormLabel>GitHub ID</FormLabel>
                        <Input placeholder="IDを入力してください" />
                        <FormLabel>Qiita ID</FormLabel>
                        <Input placeholder="IDを入力してください" />
                        <FormLabel>X ID</FormLabel>
                        <Input placeholder="IDを入力してください" />
                        <Input type="submit" />
                    </form>
                    </Box>
                </CardBody>
            </Card>


        </div >
    )

}
```

# 解決方法
registerを使う

```.Register.tsx
import { Box, Card, CardBody, CardHeader, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { useForm } from "react-hook-form";

export const Register = () => {
    const { register, handleSubmit } = useForm();

    return (
        <div>
            <Card>
                <CardHeader>
                    <Heading size='md'>新規名刺登録</Heading>
                </CardHeader>
                <CardBody>
                    <Box>
                    <form onSubmit={handleSubmit((data) => {
                        console.log("dataの中身",data);
                    })}>
                        <FormLabel>ユーザーID</FormLabel>
                          <Input type="text" placeholder="ユーザーIDを入力してください" {...register("user_id") }/>
                        <FormLabel>名前</FormLabel>
                          <Input type="text" placeholder="名前を入力してください" {...register("name")}/>
                        <FormLabel>自己紹介</FormLabel>
                          <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" {...register("dedcription")}/>
                        <FormLabel>好きな技術</FormLabel>
                          <RadioGroup>
                            <Stack direction='row'>
                              <Radio value='React'>React</Radio>
                              <Radio value='TypeScript'>TypeScript</Radio>
                              <Radio value='Github'>Github</Radio>
                            </Stack>
                          </RadioGroup>
                        <FormLabel>GitHub ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("github_id")} />
                        <FormLabel>Qiita ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("qiita_id")} />
                        <FormLabel>X ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("x_id")} />
                        <Input type="submit" />
                    </form>
                    </Box>
                </CardBody>
            </Card>


        </div >
    )

}
```

# 参考
https://react-hook-form.com/docs/useform/register

https://v2.chakra-ui.com/getting-started/with-hook-form

https://qiita.com/Yasushi-Mo/items/798f6c1b155382e44dbc

# おわりに
registerの意味を理解することができました。
<br>
[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3707255/8bfacf61-7d8d-6d27-cb07-98d1f8f27fcd.png"  width=100%>](https://projisou.jp)