Reactの練習で作っているTodoアプリについて、登録したタスクの編集をinput要素を用いておこなう場合に、コンポーネント側で分岐をさせる必要があった。

stateに編集モードを表すeditModeを持たせて、編集ボタンが押されるとtrueに設定する。

通常モード
編集モード

コンポーネント側のコードを整理してまとめたものがこちら。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
const Task = ({task}) => {
  return (
    <div className="title">
      {
        (()=> {
          if(task.editMode) {
            return (
              <input className="input" type="text" name="taskName" defaultValue={task.name} />
            );
          } else {
            return (task.name);
          }
        })()
      }
    </div>
  );
}
 
export default Task;

JSX内では直接if文を書くことは出来ないが、関数を実行することはできる。

この性質を利用して、即時関数を使ってこの中でif文を実行すれば良い。

if文の中で出力する要素をreturnすることで、JSX内での分岐をおこなうことができる。