lodashの関数通したオブジェクトをReact、typescript環境で使うには？

Question

lodashの関数通したオブジェクトをReact、typescript環境で使うには？

Reactの入門者です。
オブジェクト配列である変数productListを、lodashの.groupBy()を使用しキー"category"毎にグルーピングした配列を
テンプレートに表示させたいのですが、下記のコードではObject.entries().map()のところでエラーが発生します。

lodash関数が返す変数は標準の配列ではなくlodash特有のオブジェクトになるんでしょうか。
それが型付の世界でどういう取り扱いになるのかが理解できていません。

また、下記の疑問点はReact,JSXの知識になると思うのですが、

・やりたいこととしては、categoryでグルーピングしたリストをテンプレートに表示したいため
２重ループを書く必要が出てきますが、JSX(tsx)内ではどのように記述したら良いのでしょうか？

・ちなみに、ドキュメントを見るとlodashの関数にもmap()関数が存在するようですがJSX内で標準のmap()ではない、lodashのmap()も使えるのでしょうか？

lodash,react(jsx),typescriptと、登場人物が多く要因が複雑に絡み合ってそうで、
解決方法のご教示をお願いしたいです。よろしくお願いします。

    type product = {
        category: string
        price:  string
        stocked: boolean
        name: string
    }
    
    const productList: product[] = [
        { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
        { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
        { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
        { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
        { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
        { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
    ];
    
    const dict: any = _(productList).groupBy('category').value()
    
    return (
        <table>
            <tbody>
                <tr>
                    {
                        Object.entries(dict).map(key: string) => {
                            return (
                                <tr>
                                    <td>{key}</td>
                                </tr>
                            )
                        })
                    }
                </tr>
            </tbody>
        </table>
    )

Answer 1

@types/lodash を入れてれば dict の型は _.Dictionary<product[]> になります。(any で型を潰しちゃうのはもったいない。) で、Dictionary の型は

    interface Dictionary<T> {
        [index: string]: T;
    }

なので、Object.entries(dict) の型は [string, product[]][] ですね。(Array<[string, Array<product>]> と書いた方が分かりやすいかも？) これを map すると、例えばこんな感じでしょうか。

  const dict = _(productList).groupBy('category').value();

  return (
    <table>
      <tbody>
        {
          Object.entries(dict).map(([category, products]) => (
            products.map((product, index) => (
              <tr>
                {index === 0 && <td rowSpan={products.length}>{category}</td>}
                <td>{product.name}</td>
                <td>{product.price}</td>
                <td>{product.stocked ? 'true' : 'false'}</td>
              </tr>
            ))
          ))
        }
      </tbody>
    </table>
  );

---

まず、map の中の関数の { return ...; } が省略されてる件ですが、アロー関数にはいろんな省略形が用意されてまして、特に関数の中身が return だけの場合は {} と return を省略できます。例えば、(a, b) => { return a + b; } の代わりに (a, b) => a + b と書けます。
参考: JavaScriptのアロー関数の省略記法について - Qiita
参考: JavaScript省略形多すぎ問題 - Qiita

そして、求める結果はこんな感じでしょうか。

  return (
    <table>
      <tbody>
        {
          Object.entries(dict).map(([category, products]) => (
            <>
              <tr>
                <th colSpan={2}>{category}</th>
              </tr>
              {
                products.map(product => (
                  <tr>
                    <td>
                      {
                        product.stocked ?
                          product.name :
                          <span style={{ color: 'red' }}>product.name</span>
                      }
                    </td>
                    <td>{product.price}</td>
                  </tr>
                ))
              }
            </>
          ))
        }
      </tbody>
    </table>
  );

Comments

[退会済みユーザー]

ありがとうございます！！@types/lodash入れてます。groupByが返すオブジェクトはそのような型なんですね。
vscodeの問題の表示から確認ができるようですね。
追加の質問になってしまうのですが、
下記のようなHTMLで出力したい場合、JSXはどう記述したらいいでしょうか？（公式チュートリアルに準拠してます：https://ja.reactjs.org/docs/thinking-in-react.html）
ご回答いただいたmap()の=>の後が丸括弧になってるのがわからず、さらに多重ループになっているのでなおさら理解が追いつかず・・
2重ループの1つ目のループでHTML出力、ネストされた2つめのループ内でもHTML出力がしたい、という風になるかと思います。
ご教示いただけると幸いです。

```html
<tbody>
<tr>
<th colspan="2">Sporting Goods</th>
</tr>
<tr>
<td>Football</td>
<td>$49.99</td>
</tr>
<tr>
<td>Baseball</td>
<td>$9.99</td>
</tr>
<tr>
<td><span style="color: red;">Basketball</span></td>
<td>$29.99</td>
</tr>
<tr>
<th colspan="2">Electronics</th>
</tr>
<tr>
<td>iPod Touch</td>
<td>$99.99</td>
</tr>
<tr>
<td><span style="color: red;">iPhone 5</span></td>
<td>$399.99</td>
</tr>
<tr>
<td>Nexus 7</td>
<td>$199.99</td>
</tr>
</tbody>
```

[hoshi-takanori]

書き忘れましたが、lodash (と、その前身とも言える underscore.js) の map 関数は JavaSript の配列に map メソッドがなかった頃に作られたものと理解しており、現在では普通に配列の map メソッドを使えば良いかと。(lodash の map 関数はオブジェクトに対しても使えるようなので、そちらは今でも利用価値はあるかも。)
https://anken-hyouban.com/blog/2021/09/19/lodash/

[退会済みユーザー]

ありがとうございました！！