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

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

通常モード
編集モード

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

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内での分岐をおこなうことができる。