[FIXED] 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

Issue

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...

Solution

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

Answered By - Kowalkox

Answer Checked By - Willingham (PHPFixing Volunteer)