ChakraUI version 3.5.1 ナビゲーションを配列(map)を使って利用する方法

はじめに

ドキュメントに、ナビゲーションを配列(map)を使って利用する方法がなかったので記載します。

問題

はじめにの通りです。

ChakraUI version 3.5.1
Select (Native)
https://www.chakra-ui.com/docs/components/native-select

解決方法

Register.tsx

<Field label="好きな技術 *">
    <NativeSelectRoot>
        <NativeSelectField placeholder="選択してください">
            {skills.map((skill) => (
                <option value={skill.id}>
                    {skill.name}
                </option>
            ))}
        </NativeSelectField>
    </NativeSelectRoot>
</Field>

おわりに

ドキュメントは、基本的なことしか書いていないので、実装するには書き方を調べる必要があります。

参考

ChakraUI version 3.5.1
Select (Native)
https://www.chakra-ui.com/docs/components/native-select