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

はじめに

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

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

.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 >
    )

}

参考

おわりに

registerの意味を理解することができました。