map関数の使い方について

Question

以下のような配列の値を決められたHTML構造で表示させたいです。
(HTML構造の変更は仕様により不可とさせて下さい)

.grid-innerの中の要素は「div.title要素」と「ul要素」の１セットですが、複数セット入ることもあるので、
添字か何かで指定できたらいいなと考えています。

■ うまくいってないところ
.map関数がうまく動いていない。
添字をそのままは使えないようなので、sliceメソッドを使った

list.slice(0).children.map

・無駄が多いと思うので、繰り返しをうまく活用したい。

よろしくお願いいたします。

//配列はlistという変数にします。
return (
  <div class="grid">
    <div class="grid-inner">
      <div className="title">
        <a href={list[0]._id}>{list[0].name}</a>
      </div>
      <ul className="footer-category-links">
        {list.slice(0).children.map((e) => (
          <li key={e._id}><a href={e._id}>{e.name}</a></li>
        ))}
      </ul>
      <div className="title">
        <a href={list[1]._id}>{list[1].name}</a>
      </div>
      <ul className="footer-category-links">
        {list.slice(1).children.map((e) => (
          <li key={e._id}><a href={e._id}>{e.name}</a></li>
        ))}
      </ul>
    </div>
    <div class="grid-inner">
      <div className="title">
        <a href={list[2]._id}>{list[2].name}</a>
      </div>
      <ul className="footer-category-links">
        {list.slice(2).children.map((e) => (
          <li key={e._id}><a href={e._id}>{e.name}</a></li>
        ))}
      </ul>
    </div>
  </div>
)

[
  {
    _id: '/a',
    children: [
      {_id: '/a/a', name: 'A/A'}
      {_id: '/a/b', name: 'A/B'}
      {_id: '/a/c', name: 'A/C'}
      {_id: '/a/d', name: 'A/D'}
    ],
    name: 'A'
  }
  {_id: '/b', children: Array(4), name: 'B'}
  {_id: '/c', children: Array(7), name: 'C'}
  {_id: '/d', children: Array(7), name: 'D'}
  {_id: '/e', children: Array(9), name: 'E'}
  {_id: '/f', children: Array(0), name: 'F'}
  {_id: '/g', children: Array(12), name: 'G'}
  {_id: '/h', children: Array(9), name: 'H'}
]

<dvi class="grid">
  <div class="grid-inner">
    <div className="title">
      <a href="/a">A</a>
    </div>
    <ul>
      <li>
        <a href="/a/a">AA</a>
      </li>
      <li>
        <a href="/a/b">AB</a>
      </li>
      <li>
        <a href="/a/c">AC</a>
      </li>
      <li>
        <a href="/a/d">AD</a>
      </li>
    </ul>
    <div className="title">
      <a href="/b">B</a>
    </div>
    <ul>
      <li>
        <a href="/b/a">BA</a>
      </li>
      <li>
        <a href="/b/b">BB</a>
      </li>
      <li>
        <a href="/b/c">BC</a>
      </li>
      <li>
        <a href="/b/d">BD</a>
      </li>
    </ul>
  </div>
  <div class="grid-inner">
    <div className="title">
      <a href="/c">C</a>
    </div>
    <ul>
      <li>
        <a href="/c/a">CA</a>
      </li>
      <li>
        <a href="/c/b">CB</a>
      </li>
      <li>
        <a href="/c/c">CC</a>
      </li>
      <li>
        <a href="/c/d">CD</a>
      </li>
      <li>
        <a href="/c/e">CE</a>
      </li>
      <li>
        <a href="/c/f">CF</a>
      </li>
      <li>
        <a href="/c/g">CG</a>
      </li>
    </ul>
  </div>
  // 以下defghは省略
</dvi>

Answer 1

xs.map(f)は配列xsのすべての要素に対して関数fを適用した結果の配列を返します。
言い換えれば、xsのすべての要素に対してf(xs[0]), f(xs[1]), ...と適用した結果の配列を返します。
具体的には、以下のように使います。

const xs = [0, 1, 2]
const ys = xs.map(x => x + 1)   // xsのすべての要素に1を足す
// ys は [1, 2, 3]

一方、xs.slice(n)は配列xsのn番目より後の要素を返します。

const xs = [0, 1, 2, 3, 4]
const ys = xs.slice(2)   // xsの2番目より後の要素＝3番目から最後まで
// ys は [2, 3, 4]

したがって、list.slice(0).children.mapはlist.slice(0)が配列（中身は空[]）なのでchildrenがundefinedになってしまい、エラーが出たのではないかと思います。
list[0].children.mapでいいのではないでしょうか。

---

以上の話を踏まえた上で、実現したいことはlistの要素を2つづつ<div class="grid-inner">〜</div>に入れるということでよろしいでしょうか。であれば、まずlistの要素を2つづつ取り出してlist_by_2という配列にし、その配列をArray.prototype.mapで操作していきましょう。

「配列の要素を2つづつ取り出して配列にする」ために「配列をn個づつに分割する」関数を定義します。
JSで配列をn個ずつに分割 - Qiitaのコードを使っています。

const split = (array, n) => array.reduce((a, c, i) => i % n == 0 ? [...a, [c]] : [...a.slice(0, -1), [...a[a.length - 1], c]], [])

これをlistに適用すると、[ [{...}, {...}], [{...}, {...}], ... ]とlistの要素が2つづつ配列に入った配列になります。そしてlist_by_2.map(items => ...)のitemsは[{...}, {...}]となりますから、再びitems.map(item => ...)とすることでitemが{_id: ..., children: ..., name: ...}となります。

そんな感じで書いていくと、以下のようになると思います。

// from: https://qiita.com/guttyar2213/items/46230300c5100a06198c
const split = (array, n) => array.reduce((a, c, i) => i % n == 0 ? [...a, [c]] : [...a.slice(0, -1), [...a[a.length - 1], c]], [])

const Grid = (props) => {
  // list_by_2: [{...}, {...}, ...] -> [ [{...}, {...}], [{...}, {...}], ... ]
  const list_by_2 = split(list, 2)
  return (
    <div className="grid">
    {list_by_2.map(items => (  // ​itemsは[{...}, {...}]
      <div className="grid_inner">
​        items.map(item => (
         ​ <div className="title">
            ​<a href={item._id}>{item.name}</a>
         ​ </div>
       ​   <ul className="footer-category-links">
       ​   {item.children.map(({_id, name}) => (   // child => ...の代わりに ({_id, name}) => ...と分割代入しています
            ​<li key={_id}><a href={_id}>{name}</a></li>
          ​)}
          ​</ul>
        )
      </div>
    ​)}
   ​ </div>
 ​)
}