重複するコードはmapを使用します

2769 ワード


子どものプロジェクトをしているときに繰り返しリストを書いたとき、指導者からmapを使ったほうがいいというフィードバックがありました.
ということで地図を再利用しました(!)
  const descriptionList = [
    {
      id: 0,
      title: 'Product Details',
    },
    {
      id: 1,
      title: 'Shipping & Delivery',
    },
    {
      id: 2,
      title: 'Reviews',
    },
  ];



      <ul ref={detailRef} className="descriptions row">
        {descriptionList.map(({ id, title }) => {
          return (   
              <li key={id} className={id} onClick={handleCheckedList}>
                <i
                  className={
                    checkList(`${id}`) ? `fas fa-minus` : `fas fa-plus`
                  }
                />
                &nbsp; {title}
              </li>
          );
        })}
      </ul>
コードを重複させないので、よりすっきり(!)
みんな地図を描こうぜー!