How to select and get all the values of rows and columns of Table in React js on Click and pass it to other Component...Help Me im stuck in this - reactjs

Question

So I have Created Custom Table Component for my data to show and i want to get all the rows value with the Heading on Click of it and pass it to any component
This is COde of my table Component
import PlaceBett from "./PlaceBett";
const MatchBetTable = ({ data }) => {
const [showPlaceBet, setShowPlaceBet] = useState(false);
const [team1Back, setTeam1Back] = useState("");
const [team1Lay, setTeam1Lay] = useState("");
const [team2Lay, setTeam2Lay] = useState("");
const [team2Back, setTeam2Back] = useState("");
const [drawLay, SetDrawLay] = useState("");
const [drawBack, SetDrawBack] = useState("");
const handleClick = () => {
setShowPlaceBet((prev) => !prev);
};
// console.log(data.values[0].val1);
console.log(data);
return (
<>
{showPlaceBet && (
<PlaceBett
data={data}
team1Back={team1Back}
team1Lay={team1Lay}
team2Back={team2Back}
team2Lay={team2Lay}
drawBack={drawBack}
drawLay={drawLay}
/>
)}
<table className="table-auto mb-4 text-black w-full ">
<thead className="bg-gray-500 md:p-5 p-1 text-sm">
<tr>
<th className="md:p-5 p-1 text-sm">{data.name}</th>
<th className="md:p-5 p-1 text-sm" colSpan="5"></th>
<th className="md:p-5 p-1 text-sm">BET DELAY-3 SEC</th>
</tr>
</thead>
<thead>
<tr
className="bg-white md:p-5 p-1 text-sm border border-table_border"
onClick={handleClick}
>
<th className="md:p-5 p-1 text-sm">MAX 50000</th>
<th className="md:p-5 p-1 text-sm" colSpan="2"></th>
<th className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
BACK <p>(Back)</p>
</th>
<th className="md:p-5 p-1 text-sm text-black bg-table_row-cream border border-table_border">
LAY <p>(lay)</p>
</th>
<th className="md:p-5 p-1 text-sm" colSpan="2"></th>
</tr>
</thead>
<tbody>
<tr className="md:p-5 p-1 text-sm border border-table_border text-center">
<td className="bg-gray-300 md:p-5 p-1 text-sm">
{data.values[0].val1 === null ? "-" : data.values[0].val1}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td
dataTitle={data.values[0].odds}
className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border "
onClick={(e) => {
console.log(e.target.innerHTML);
setTeam1Back(e.target.innerHTML);
console.log("team1Back", team1Back);
}}
>
{data.values[0].odds === null ? "-" : data.values[0].odds}
</td>
{/* {!data.values.odds && (
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
0<p>(-)</p>
</td>
)} */}
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border ">
{data.values[0].val2 === null ? 0 : data.values[0]?.val2}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border ">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border ">
-<p>(-)</p>
</td>
</tr>
{data.values[1] && (
<tr className="md:p-5 p-1 text-sm border border-table_border text-center">
<td className="bg-gray-300 md:p-5 p-1 text-sm">
{data.values[1]?.val1}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td
className="md:p-5 p-1 odd:bg-table_row-cream text-sm bg-table_row-blue border border-table_border"
onClick={(e) => SetDrawBack(e.target.value)}
>
{data.values[1]?.odds}
</td>
<td
className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border"
onClick={(e) => SetDrawLay(e.target.value)}
>
{data.values[1]?.val2 === null && "0"}
{data.values[1]?.val2 && data.values[1]?.val2}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
</tr>
)}
{data?.values[2] && (
<tr className="md:p-5 p-1 text-sm border border-table_border text-center">
<td className="bg-gray-300 md:p-5 p-1 text-sm">
{data?.values[2] && data.values[2]?.val1}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td
className="md:p-5 p-1 odd:bg-table_row-cream text-sm bg-table_row-blue border border-table_border"
onClick={(e) => setTeam2Back(e.target.value)}
>
{data?.values[2] && data.values[2]?.odds}
</td>
<td
className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border"
onClick={(e) => setTeam2Lay(e.target.value)}
>
{data.values[2]?.val2 === null && "0"}
{data.values[2]?.val2 && data.values[2]?.val2}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
</tr>
)}
</tbody>
</table>
</>
);
};
export default MatchBetTable;
i want the values in state like i used Team1Back and Team1Lay...and pass it to the placeBet Component after clicking particular row...

Answer 1

Cant you do something like this?
<>
{data.values.map((bet) => (
<tr className="md:p-5 p-1 text-sm border border-table_border text-center">
<td className="bg-gray-300 md:p-5 p-1 text-sm">{bet?.val1}</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-blue border border-table_border ">
-<p>(-)</p>
</td>
<td
className="md:p-5 p-1 odd:bg-table_row-cream text-sm bg-table_row-blue border border-table_border"
onClick={(e) => SetDrawBack(e.target.value)}
>
{bet?.odds}
</td>
<td
className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border"
onClick={(e) => SetDrawLay(e.target.value)}
>
{bet.val2 === null && "0"}
{bet.val2 && bet?.val2}
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
<td className="md:p-5 p-1 text-sm bg-table_row-cream border border-table_border">
-<p>(-)</p>
</td>
</tr>
))}
</>

Answer 2

Use .map instead of data[0], data[1]... then add onClick to row and pass whole object from map