[React]オブジェクトをmapで展開する方法

はじめに

本記事はオブジェクトでmapを展開する方法について解説する記事です。
筆者はReactについて現在勉強中ですが分かりにくいなどあればメッセージをくださると幸いです。

やり方

オブジェクトのkeysとvaluesの二通りで解説します ※以下例

const x = [1 : "abc"]  // [keys : values]

1.keysを出力する場合

keysを展開する場合はObject.keys(オブジェクト名).mapで行うことができます

export function App() {
  const names = {"太郎": [], "次郎" : [] ,"三郎":[]}

  return (
    <>
      <select>
         <option value='' selected >選択してください</option>
         {Object.keys(names).map(name => {
            return (
               <option value={name} id={name}>{name}</option>
            );
         })}
      </select>
    </>
  );
}

2.valuesを出力する場合

valuesを展開する場合はObject.values(オブジェクト名).mapで行うことができます

export function App() {
  const names = {1 : "太郎",2 : "次郎", 3 : "三郎"}

  return (
    <>
      <select>
         <option value='' selected >選択してください</option>
         {Object.values(names).map(name => {
            return (
               <option value={name} id={name}>{name}</option>
            );
         })}
      </select>
    </>
  );
}