score:1

Accepted answer

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;


score:1

you could pass the index of the route and contents into the onclick function right? something like:

const contents = (item, contentsindex, routeindex) => {
...
  <icon
   link
   name="eye"
   onclick={() => handleclickview("0", "usecase", contentsindex, routeindex)}
  />
}

this could then be used to get the correct data:

const handleclickview = (a, b, contentsindex, routeindex) => {
  const data = data[routeindex][contentsindex];
}

Related Query

More Query from same tag