削除ボタン実装【filter】

React学習の際に参考にした削除ボタン実装方法を
備忘録として記載させていただきます。

今回のファイル構造

手順

sidebar.jsx

<button onClick={() => onDeleteNote(note.id)}>削除</button>

※アロー関数で記述するのは、リロードした際に発火させない事と引数を取得する為です。

App.jsx

  const onDeleteNote = (id) => {
    const filterNotes = notes.filter((note) => note.id !== id);
    setNotes(filterNotes);
  }

フィルター関数を使用して、
取得したidと一致しないidを削除する命令文を記述していきます。

App.jsx

  return (
    <div className='App'>
      <Sidebar
       onDeleteNote={onDeleteNote}
      />
    </div>
  );

次にプロップスで渡します。

sidebar.jsx

const Sidebar = ({onDeleteNote }) => {…}

最後に受け取りの記述をして完了です。