Javascript: mapメソッドのついて

Question

実現したいこと

map処理で配列の中にhashが入るようにしたいです。

理想型

    const options = [
      {label: "one", value: 1, style: { color: 'red' }},
      {label: "two", value: 2, style: { color: 'blue' }}
      // more options...
    ];

現状

    const options = this.props.ItemCategories.map(option =>
      {label: option.name, value: option.id, style: { color: 'red' }}
    );

困っていること
mapメソッドの書き方は問題はないと思うのですが、多次元配列をmap処理の中で作ることができずに困っています。

追記

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, name: "りんご"}
1: {id: 6, name: "アップル"}
2: {id: 5, name: "オレンジ"}
3: {id: 2, name: "ピーチ"}
4: {id: 9, name: "スイカ"}
...

多次元配列は言葉として誤りかもしれないです。（勉強不足ですいません）

Comments

[ozwk]

入力例(this.props.ItemCategoriesになにが入っているかの例)をください

[Lhankor_Mhy]

「多次元配列」とはどのようなものですか？

[nanase21]

質問欄に追記しました。

[nanase21]

実際に、やりたいこととしては商品名によって文字の色を変えたいだけです。

Answer 1

オブジェクトを返すつもりでx=>{...}と書くと、{}がブロックを表すカッコと認識されてしまいます。
x=>({...})とすればオブジェクトを書いていると認識してくれます。

    const options = this.props.ItemCategories.map(option =>
      ({label: option.name, value: option.id, style: { color: 'red' }}) // x=>({...}) と外側に()つける形
    );

---

うまく行かないときは「...できない」だけではなく、「こんなエラーが出る」などなにが起こっているのかを書きましょう

Comments

[nanase21]

ありがとうございます。
勉強になりました。

[ozwk]

option => {return {...};}でも可