【React】returnを書き忘れて表示されない話【JavaScript】

はじめに

Udemyで某React入門講座( https://www.udemy.com/course/modern_javascipt_react_beginner/ )を見ながらToDoアプリを作っていたとき、リストが表示されないという現象に出くわしました。
console.logでデータもちゃんとあるのに、画面に何も出ない……。けどエラーも出ないので、解決に時間がかかりました。

---

起きたこと：.map() でリストが表示されない

以下は、問題が起きた当時のコードです。

export const IncompleteTodos = (props) => {
  const { todos } = props;

  return (
    <ul>
      {todos.map((todo, index) => {
        <li key={index}>
          ~何らかの処理~
        </li>;
      })}
    </ul>
  );
};

正解コード①

ちなみにこれは動きます

export const IncompleteTodos = (props) => {
  const { todos } = props;

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          ~何らかの処理~
        </li>
      ))}
    </ul>
  );
};

正解コード②

答えは単純で、returnを書き忘れていました。

export const IncompleteTodos = (props) => {
  const { todos } = props;

  return (
    <ul>
      {todos.map((todo, index) => {
        return (                         //明示的
        <li key={index}>
          ~何らかの処理~
        </li>
      )})}
    </ul>
  );
};

明示的にreturnを書くと正解コード②になります。
今回の返り値は1行なので、returnを省略することができます。
ゆえに正解コード①は暗黙のreturnとなっています。

問題のコードでエラーメッセージがないのは、返り値のない関数（.map()の返り値はundefind）と認識されたからでした。

振り返り

React、というよりJavaScriptは複数の書き方があって読みづらいですね…
いろんな記法、パターンを勉強して身に着けておいたほうがよさそうです