🦁

React で親要素を削除

2022/08/26に公開

TypeScript

JavaScript

tech

Todoアプリを作成する際に、Todoを完了した際の、完了した要素を削除する方法について書きます。

ググってみても、jQueryやgetElementByIdで要素を取得して、、、、みたいなものしかなかったので、簡単にですが書きます。

todoをmapして表示

まずは、mapを使ってTodoを表示させます。

      <ul>
        {todos.map((todo: TodoObj,index:number) => (
          <li key={todo.id}>
            <p>{todo.todoText}</p>
            <Btn primary={true} clickHandler={() => {clickHandlerDelete(index)}}>完了</Btn>
          </li>
        ))}
      </ul>

「完了」ボタンを押すことによって、親の li 要素自体を削除したいと思います。
どの要素を削除するのかは、map の第２引数の index を使用します。
indexを引数に渡すのですが、そのまま渡してしまうとレンダリング時に実行されてしまいます。

// NG レンダリング時に実行されてしまう
<Btn primary={true} clickHandler={clickHandlerDelete(index)}>完了</Btn>
// OK アロー関数で囲む
<Btn primary={true} clickHandler={() => {clickHandlerDelete(index)}}>完了</Btn>

ボタンの関数内の処理は、新しいtodosの配列を作成して、その中のmapから受け取った index番目を splice()で一つ削除します。
そして、newTodosをsetTodosに渡してnewTodosをレンダリングします。

  const clickHandlerDelete = (index:number) => {
    const newTodos = [...todos]
    const deleteTodo = newTodos.splice(index,1)
    setTodos(newTodos);
  }

todoをmapして表示

Discussion