React テーブルの値を更新したい セルの個別取得はどうすれば実現できますでしょうか

Question

前提

Reactでtextareaの中で指定した文字の出現回数を表にするアプリを
作っています
テーブルのScoreのセルにカウントされた数字が入ります
https://codesandbox.io/s/useeffect-text-table-s0flxr?file=/src/components/Table.jsx

実現したいこと

テーブルのScoreのセルにカウントされた数字を入れたいです
下記のように１個づつScore：にメソッドやState を定義すれば実現できるのですが、

const data = [
    {
      No: 1,
      Name: "A",
      Score: `${countTargetString(text, "(a|A)")}`   //指定した文字の出現回数を取得する関数
    },
    {
      No: 2,
      Name: "B",
      Score: `${strCountB}`　//もしくはStateを定義
    }
  ];

下記のようにfor文で繰り返し文にした場合、Score：の値はどうすればよろしいでしょうか

const data = [];
  let cntNo = 1;
  for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
    data.push({
      No: cntNo++,
      Name: String.fromCharCode([i]),
      Score: `${strCount}`
    });
  }

該当のソースコード

import { memo, useEffect, useState } from "react";

export const Table = memo(() => {
  const [text, setText] = useState("");

  const [strCount, setStrCount] = useState(0);
  const [strCountB, setStrCountB] = useState(0);

  useEffect(() => {
    setStrCount(countTargetString(text, "(a|A)"));
    setStrCountB(countTargetString(text, "(b|B)"));
  }, [text]);

  const handleChange = (e) => {
    setText(e.target.value);
  };

  // 文字列中に指定した文字の出現回数を取得
  function countTargetString(str, val) {
    return (str.match(new RegExp(val, "g")) || []).length;
  }

  const data = [];
  let cntNo = 1;
  for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
    data.push({
      No: cntNo++,
      Name: String.fromCharCode([i]),
      Score: `${strCount}`
    });
  }

  // const data = [
  //   {
  //     No: 1,
  //     Name: "A",
  //     Score: `${countTargetString(text, "(a|A)")}`
  //   },
  //   {
  //     No: 2,
  //     Name: "B",
  //     Score: `${strCountB}`
  //   }
  // ];

  return (
    <div>
      <form>
        <textarea value={text} onChange={handleChange} />
      </form>
      <table border="1" width="500" cellPadding="0">
        <th>No</th>
        <th>Name</th>
        <th>Score</th>
        {data.map((tdpod) => (
          <tr key={tdpod.No}>
            <td>{tdpod.No}</td>
            <td>{tdpod.Name}</td>
            <td onChange={() => handleChange()}>{tdpod.Score}</td>
          </tr>
        ))}
      </table>
    </div>
  );
});

試したこと

JavaScriptですとquerySelectorでtdを取得して、td[2].textContent 　みたいにセルを特定した書き方が出来たのですが、Reactではどうするのでしょうか
swich文を試しましたが、うまくいかず、お知恵をお借りしたく質問致しました

補足情報（FW/ツールのバージョンなど）

Comments

[slemntqe]

あなたの質問文に書かれているコードは非常に見づらいです。コード挿入用タグを利用して下さい。回答者の気持ちを考えて質問して下さい。

[退会済みユーザー]

失礼致しました

[退会済みユーザー]

コードが見づらいのは申し訳ありませんでした。気をつけます。
人は感情で生きていますので、もう少し柔らかい言い方をして下さると助かります。
様々な所で様々な話を聞きますが、仕事ができるから、コードが書けるからと言って態度が悪いというような話をよく聞きます。エンジニアに限らず、他の職種でもです。
あなたが悪い訳ではないですが、せっかくご指摘してくださったのにもったいないと思いまして、もう少し人の気持ちを考えて頂けるとあなた自身の人生ももっと良くなると思います。

[slemntqe]

あなたのteratailの投稿は全てコードがコード挿入用タグを利用して書かれていません。
一部でコード挿入用タグを使用しているのでコード挿入用タグの存在や利用方法を知らない訳でも無いでしょう。
指摘しなければ今後も同様の投稿をされるつもりだったのではないでしょうか？

前回の質問本文のコードも見るに堪えないものです。
私ではない人物によって低評価も付けられている状況です。
もしあなたが回答者の立場となった場合に見づらいという感情にならないでしょうか。
https://teratail.com/questions/359484

丁寧な伝え方をしているつもりですが、どこまでへりくだった言い方をすればあなたにとって都合の良い言い方になりますか。私にとってあなたはお客様ではありませんよ。
反論している時点で反省の色が見えません。もう一度ご自身の事を十分に見つめ直してはいかがでしょうか。

あなたは何故私があえて指摘しているかの理由を考える必要があります。
「見づらい」だけでなくそれに派生する物もあります。

どうしても反論しなければ気が済まない人のようですので私はこれ以上返答しません。
プログラムだけでなくご自身の事について十分に見つめ直してはいかがでしょうか。

[退会済みユーザー]

最初からそういう風に言ってくれればいいのに
申し訳ありません。修正いたします。

Answer 1

ループを回しながら、1つごとにscoreを詰めていけばいいだけではないでしょうか？

function countTargetString(str, val) {
// フラグにiを入れて、大文字小文字を無視させる
return (str.match(new RegExp(val, "gi")) || []).length;
}

/* 中略 */

for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
data.push({
No: cntNo++,
Name: String.fromCharCode([i]),
Score: countTargetString(text, String.fromCharCode([i]))
});
}

Comments

[退会済みユーザー]

素早いご回答ありがとうございます　出来ました!!
「フラグにiを入れて、大文字小文字を無視させる」😆さすがです！！！！
ありがとうございました！！