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...
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>
))}
</>