JSの戻り値が単一行だったのでreturnを省略したら何も表示されなくなった

はじめに

JSで関数の戻り値が単一行だったので、returnを省略したら何も表示されなくなったのでまとめました。

問題

returnを省略したらuseStateの初期値が表示されなくなった。

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2"
  ]);

  // 省略
  
  return (
    <>

      // 省略
      
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul id="incomplete-list">
            {
              incompleteTodos.map((todo) => {
                <li key={todo}>
                  <div className="list-row">
                    <p className="todo-item">{todo1}</p>
                    <button>完了</button>
                    <button>削除</button>
                  </div>
                </li>
              })
            }
        </ul>
      </div>
      
      // 省略
      
    </>
  );
};

解決方法

中括弧ではなく、括弧に変えてあげる必要があった。

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2"
  ]);

  // 省略
  
  return (
    <>

      // 省略
      
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul id="incomplete-list">
            {
-              incompleteTodos.map((todo) => {
+              incompleteTodos.map((todo) => (
                    <li key={todo}>
                      <div className="list-row">
                        <p className="todo-item">{todo1}</p>
                        <button>完了</button>
                        <button>削除</button>
                      </div>
                    </li>
-              })
+              ))
            }
        </ul>
      </div>
      
      // 省略
      
    </>
  );
};

おわりに

フロントエンドは挙動がおかしくてもエラーが表示されない場合もあるから、原因を探すのが難しく感じる。