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