前提
Reactでtextareaの中で指定した文字の出現回数を表にするアプリを
作っています
テーブルのScoreのセルにカウントされた数字が入ります
https://codesandbox.io/s/useeffect-text-table-s0flxr?file=/src/components/Table.jsx
実現したいこと
テーブルのScoreのセルにカウントされた数字を入れたいです
下記のように1個づつScore:にメソッドやState を定義すれば実現できるのですが、
javascript
1const data = [ 2 { 3 No: 1, 4 Name: "A", 5 Score: `${countTargetString(text, "(a|A)")}` //指定した文字の出現回数を取得する関数 6 }, 7 { 8 No: 2, 9 Name: "B", 10 Score: `${strCountB}` //もしくはStateを定義 11 } 12 ]; 13
下記のようにfor文で繰り返し文にした場合、Score:の値はどうすればよろしいでしょうか
javascript
1const data = []; 2 let cntNo = 1; 3 for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { 4 data.push({ 5 No: cntNo++, 6 Name: String.fromCharCode([i]), 7 Score: `${strCount}` 8 }); 9 }
該当のソースコード
React.js
1import { memo, useEffect, useState } from "react"; 2 3export const Table = memo(() => { 4 const [text, setText] = useState(""); 5 6 const [strCount, setStrCount] = useState(0); 7 const [strCountB, setStrCountB] = useState(0); 8 9 useEffect(() => { 10 setStrCount(countTargetString(text, "(a|A)")); 11 setStrCountB(countTargetString(text, "(b|B)")); 12 }, [text]); 13 14 const handleChange = (e) => { 15 setText(e.target.value); 16 }; 17 18 // 文字列中に指定した文字の出現回数を取得 19 function countTargetString(str, val) { 20 return (str.match(new RegExp(val, "g")) || []).length; 21 } 22 23 const data = []; 24 let cntNo = 1; 25 for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { 26 data.push({ 27 No: cntNo++, 28 Name: String.fromCharCode([i]), 29 Score: `${strCount}` 30 }); 31 } 32 33 // const data = [ 34 // { 35 // No: 1, 36 // Name: "A", 37 // Score: `${countTargetString(text, "(a|A)")}` 38 // }, 39 // { 40 // No: 2, 41 // Name: "B", 42 // Score: `${strCountB}` 43 // } 44 // ]; 45 46 return ( 47 <div> 48 <form> 49 <textarea value={text} onChange={handleChange} /> 50 </form> 51 <table border="1" width="500" cellPadding="0"> 52 <th>No</th> 53 <th>Name</th> 54 <th>Score</th> 55 {data.map((tdpod) => ( 56 <tr key={tdpod.No}> 57 <td>{tdpod.No}</td> 58 <td>{tdpod.Name}</td> 59 <td onChange={() => handleChange()}>{tdpod.Score}</td> 60 </tr> 61 ))} 62 </table> 63 </div> 64 ); 65}); 66
試したこと
JavaScriptですとquerySelectorでtdを取得して、td[2].textContent みたいにセルを特定した書き方が出来たのですが、Reactではどうするのでしょうか
swich文を試しましたが、うまくいかず、お知恵をお借りしたく質問致しました
補足情報(FW/ツールのバージョンなど)
あなたの質問文に書かれているコードは非常に見づらいです。コード挿入用タグを利用して下さい。回答者の気持ちを考えて質問して下さい。

失礼致しました

コードが見づらいのは申し訳ありませんでした。気をつけます。
人は感情で生きていますので、もう少し柔らかい言い方をして下さると助かります。
様々な所で様々な話を聞きますが、仕事ができるから、コードが書けるからと言って態度が悪いというような話をよく聞きます。エンジニアに限らず、他の職種でもです。
あなたが悪い訳ではないですが、せっかくご指摘してくださったのにもったいないと思いまして、もう少し人の気持ちを考えて頂けるとあなた自身の人生ももっと良くなると思います。
あなたのteratailの投稿は全てコードがコード挿入用タグを利用して書かれていません。
一部でコード挿入用タグを使用しているのでコード挿入用タグの存在や利用方法を知らない訳でも無いでしょう。
指摘しなければ今後も同様の投稿をされるつもりだったのではないでしょうか?
前回の質問本文のコードも見るに堪えないものです。
私ではない人物によって低評価も付けられている状況です。
もしあなたが回答者の立場となった場合に見づらいという感情にならないでしょうか。
https://teratail.com/questions/359484
丁寧な伝え方をしているつもりですが、どこまでへりくだった言い方をすればあなたにとって都合の良い言い方になりますか。私にとってあなたはお客様ではありませんよ。
反論している時点で反省の色が見えません。もう一度ご自身の事を十分に見つめ直してはいかがでしょうか。
あなたは何故私があえて指摘しているかの理由を考える必要があります。
「見づらい」だけでなくそれに派生する物もあります。
どうしても反論しなければ気が済まない人のようですので私はこれ以上返答しません。
プログラムだけでなくご自身の事について十分に見つめ直してはいかがでしょうか。

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

回答1件
あなたの回答
tips
プレビュー