React Componentでmapのネストでつまづいたのでメモ

半日ほどつまづいたので…

mapをネストしたらレンダリングされなかった

Reactのコンポーネントでオブジェクトが入ったリスト(配列)をレンダリングしようとしていました。

foo.tsx

import React from "react";

const list = [
{ 
　　　　　category: "スーパー",
　　　　　todoList: [
               {title: "牛乳を買う",date: "2023/02/01",rating: "低"},
               {title: "米を買う",date: "2023/02/01",rating: "中"},
             ]
},
{ 
　　　　　category: "駅",
　　　　　todoList: [
               {title: "定期券更新",date: "2023/01/31",rating: "高"}
             ]
},
]

const Taste: React.FC = () => {
　　return (
  <>
  {list.map((item) => {
    item.map((todo, i) =>{
      return (
       <Todo　key={i}>
         <Icon category={item.category} />
         <TodoTitle>{todo.title}</TodoTitle>
       </Todo>
      )
    })
  })}
  </>
 )
｝

なぜレンダリングされなかったのか

returnの記述が足りていませんでした。

foo.tsx

// 省略
const Taste: React.FC = () => {
　　return (
  <>
  {list.map((item) => {
    return item.map((todo, i) =>{ // ←return が必要
      return (
       <Todo　key={i}>
         <Icon category={item.category} />
         <TodoTitle>{todo.title}</TodoTitle>
       </Todo>
      )
    })
  })}
  </>
 )
｝

いつか忘れてしまいそうなのでメモします。