[ React.js ] (JSX) for文の中にmapで表示させたい

Question

＜実現したいこと＞
for文を利用し、配列data[]の数字の数(今回は7)だけ、mapを回してtitleを表示させたい。
今回の場合はdata[0]からdata[7]まであります。

console.log(data.length) // => 7
console.log(data[0].title) // => "映画１"

return (
 <div>
 {() => {
  for (let i = 0; i < data.length; i++) {
   { 
     data[i].map((item) => {
       return (
         <li key={item.id}>										 
            <span>{item.title}</span>
         </li>
       );
      });
      }
     }
   }
  }
 </div>
)

<画面表示>

映画１(data[0])
映画２(data[1])
映画３(data[2])
.
.
.

エラーは検証からも起きていないようなのですが、何も表示されません。
即時関数とfor,mapの部分がおかしいとは思って調べているのですが、正しい解決方法が分かりません。

この場合の正しい書き方や、他にこういう書き方がいいなどありましたらお答えいただければと思います。

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

Answer 1

 {() => {
  for (let i = 0; i < data.length; i++) {
   { 
     data[i].map((item) => {
       return (
         <li key={item.id}>                                         
            <span>{item.title}</span>
         </li>
       );
      });
      }
     }
   }
  }

内側のmapの結果も受け取らずに捨てていますし、いちばん外側のアロー関数も関数を書いただけで実行していません。

Answer 2

dataが配列で、中身がオブジェクトならdata[i]はオブジェクトなので
mapで参照できないでしょう

Answer 3

回答からヒントを得て、

					{data.map((item, i) => {
						return (
							<>
							  <li key={i} className={hoge}>
								<span>{item.title}</span>
							  </li>
							</>
						);
					})}

このようにシンプルな記述で目的を達成すつことができました。
論理的に考えたいと思います。
ありがとうございました。