Reactでループで回した要素を取得する方法

Question

実現したいこと

<button>をクリックしたら、クリックした<button>の要素を取得したい

例)
<button id ="1">りんご</button>をクリックしたら<button id ="1"></button>を取得
<button id ="2">みかん</button>をクリックしたら<button id ="2"></button>を取得
<button id ="3">いちご</button>をクリックしたら<button id ="3"></button>を取得

使用するコード

const fruits= [
  { id: 1, value: 'りんご' },
  { id: 2, value: 'みかん' },
  { id: 3, value: 'いちご' },
];

export const Fruits = () =>{

 //配列の個数のRefを作成
  const listRefs = useRef([]);
    fruits.forEach((_, i) => {
    listRefs.current[i] = createRef();
  });
//ボタンをクリックして確認
  const toggleClassBtn = () => {
    console.log(listRefs.current);
  };

 return(
    <>
      {fruits.map((fruit, index) => {
        return (
          <button
            key={fruit.id}
            className={styles.fruitsStyle}
            onClick={toggleClassBtn}
            id={fruit.id}
            ref={listRefs.current[i]} //生成したrefを定義
          >
            {fruit.value}
          </button>
        );
      })}
    </>

)

}

試したこと

まず、クリックしたボタンタグを取得するためにuseRefを使って、要素を取得するようにしました。
今回は、<button>タグをmapで回しているので　fruits配列分　ref属性を作成ました。
ref属性を定義することで、冒頭で記述した　idが〇〇だったら　〇〇クラスを付与する　という処理を行うことできると思いましたので定義をしております。

確認用でbuttonタグを押した時にconsoleで結果を出力しました。
上手く取得できてます。

躓いていること

ブラウザで表示している<button>タグどれを押しても、出力される結果が前項で添付させていただきました
結果になってしまい、どのようにしたらクリックしたボタンのidに合わせて<button>タグを取得することができるようになるか分からず手が止まってしまっております。

補足情報

<button>タグはmapで回して出力する

どなたかお詳しい方がいらっしゃいましたら、ご教示いただけますと幸いです。

Answer 1

素直にイベントオブジェクトから取る、ではまずいのでしょうか？

  const toggleClassBtn = (e) => {
    console.log(e.currentTarget);
  };

Comments

[Gheoxj]

useRefを使って実装したいと考えております。。
ご回答いただいたのにも関わらず申し訳ありません。

[maisumakun]

> useRefを使って実装したいと考えております。。

何を実現するためにその実装が必要なのでしょうか？

[maisumakun]

> どのようにしたらクリックしたボタンのidに合わせて<button>タグを取得することができるようになるか

イベントオブジェクトからボタンを取れるのでそこからidを参照できます…が、ボタンが取れればそのまま使えばいいだけの話です。

[Gheoxj]

ボタンを取得してclassを付与した際に、useRefを使用することで
再レンダリングを避けることができると考えたので再レンダリングを避けるために実装を行いたいです。

[maisumakun]

再レンダリングを行わずにクラスを書き換えるなんてことは、そもそも行わないでください。

Reactで描画したHTML要素をReact外から書き換えると、その後の更新描画が破綻する危険があります。

[Gheoxj]

更新描画が破綻するなんて危険性があるのですね。。私の学習不足でした。
お手数をお掛けして申し訳ありませんでした。
先程、ご教示いただきましたイベントオブジェクトを使っていきます。
ご回答していただき、ありがとうございました！