How to get the row data from a table using React?

Question

I have a table that shows some data. One of its column contains some action icons to get a high-level information from the particular row with an onClick. I need to fetch the data from the rows and render it in another component. How can I implement this?

Below is the code :

const MainContent = () => {
  ....
  ....
  ....

  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        <td>{route.appName}</td>
        <td>{route.parent}</td>
        <td>{route.createdTs}</td>
        <td></td>
        <td>{route.respCode}</td>
        <td>{route.respContentType}</td>
        <td>{route.respDelay}</td>
        <td>
          <Icon
            link
            name="eye"
            onClick={() => handleClickView("0", "PARENT")}
          />
          <Icon
            link
            name="edit"
            onClick={() => handleClickView("0", "PARENT")}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };
  // iterating through sub-arrays
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon link name="delete" />
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      <tr key={index}>
        <td>{item.appName}</td>
        <td></td>
        <td>{item.createdTs}</td>
        <td>{item.pattern}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    );
  };

  return (
    <div>
     .... 
     ....
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th> {/* row that contains the icons*/}
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   ....
                   ....
                   ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

Can someone provide me any reference or workaround to implement this?

Answer 1

As Tushar Kale suggested, I have passed the route and item in the onClick of the icon. Following is the code that worked for me,

const MainContent = () => {
  ....
  ....
  ....

  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        <td>{route.appName}</td>
        <td>{route.parent}</td>
        <td>{route.createdTs}</td>
        <td></td>
        <td>{route.respCode}</td>
        <td>{route.respContentType}</td>
        <td>{route.respDelay}</td>
        <td>
          <Icon
            link
            name="eye"
            onClick={() => handleClickView("0", "PARENT", route)}
          />
          <Icon
            link
            name="edit"
            onClick={() => handleClickView("0", "PARENT", route)}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };
  // iterating through sub-arrays
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE", item)}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE", item)}
            />
            <Icon link name="delete" />
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      <tr key={index}>
        <td>{item.appName}</td>
        <td></td>
        <td>{item.createdTs}</td>
        <td>{item.pattern}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    );
  };

  return (
    <div>
     .... 
     ....
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th> {/* row that contains the icons*/}
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   ....
                   ....
                   ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;