reactでコンポーネント内のボタンをクリックした時にコンポーネントを操作したい

Question

実現したいこと

reactでコンポーネント内のボタンをクリックした時に親コンポーネントを非表示にしたいです。
また、コンポーネントがmapでデータを並べているのでそれぞれに対応したものを非表示にしたいです。

コード

const HandleClickDelete = (e) => {
//コンポーネントの削除
}

return (
  {data.map((item, index) => (
    <div key={index}> {/*これごと消したい*/}
      <p>Hello World</p>
      <button onClick={HandleClickDelete}>Delete</button>
    </div>
  ))}
)

試したこと

HandleClickDeleteでevent.targetから操作をするとbuttonのみが消えてしまいます。

Comments

[hoshi-takanori]

「event.targetから操作」って生 DOM をいじってますか？ React でそれは良くないですね。
data.map(item => …) ってことは、削除ボタンが押されたらその item を data から消したいのでは…。

[tests]

display: noneのstyleを追加して非表示にしています。
dataから消したいというよりは画面上から表示を消したいです。

[hoshi-takanori]

React の基本的な考え方は、データが変わると結果として表示も変わる、ということです。なので、表示しないなら、単に表示しなければいいのではなく、「表示しない」ことをデータとしてどこかに持ち、かつそのデータが変更されたことによって表示が更新されるようにします。
具体的な方法は、各 item に表示・非表示のフラグを持たせるか、表示しない item のリストを別途持つ、などでしょうか。

[tests]

各 item に表示・非表示のフラグを持たせる場合、フラグを更新をしようとした時にdataの配列をstateとして保持しなければいけなくなりませんか？
具体的にdataはAPIからgetしたオブジェクト型のデータなのですが、それをdataとflagを持つオブジェクトに入れ直してstateで管理するというイメージでしょうか？

[hoshi-takanori]

表示するかしないかという情報は、立派な state なので、ちゃんと state として管理する必要があるということです。
data をいじりたくないということであれば、表示するかしないかという情報を別途持つことも可能です。

Answer 1

表示するかしないかという情報は、立派な state なので、ちゃんと state として管理べきだと思います。
例えば、data の各項目が id を持つとして、削除した id の配列を別途 state にすればこんな感じになるでしょう。

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [deletedIds, setDeletedIds] = useState([]);

  useEffect(() => {
    // 実際は API から取得する。
    setData([
      { id: 1, name: 'aaa' },
      { id: 2, name: 'bbb' },
      { id: 3, name: 'ccc' },
    ]);
  }, []);

  const onDelete = (id) => {
    setDeletedIds([...deletedIds, id]);
  };

  return (
    <>
      {data.map(item => !deletedIds.includes(item.id) && (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => onDelete(item.id)}>Delete</button>
        </div>
      ))}
      <button onClick={() => setDeletedIds([])}>Undelete All</button>
    </>
  );
}

export default App;