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