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];
}
Source: stackoverflow.com
Related Query
- How to get data from table row click using Semantic's React Table Component
- How to get the row data from a table using React?
- How to retrieve data from the server using fetch get method and show it in a table
- How can I get the data out of a table using Semantic UI React
- How to get the data from Redux store using class components in React
- How to get data from the backend that needs authorization using React
- how to get data table row data/object using Splitbutton from primereact
- How to get the data from React Context Consumer outside the render
- How to get React Table Row Data Onclick
- How do I access data returned from an axios get to display on a web page using react js?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to change the selected table row background using Material-UI on React
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to get the returned data from a smart contract function using ethers.js?
- How to send data from react and use the request body in express, using Axios?
- How do I pass the text data from firestore inside the expandable row and get the document ID to be passed inside the setState?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How can I get data from query string using route in react js
- How to get data from an API only once when the page is loaded using axios.get method?
- Trying to get data of the row clicked of the table react js
- how to get table data from api using gatsby-ant-plugin
- How to access data from get request made by a React functional component to localhost server using Axios?
- How can I get the right data from database with react
- I want to navigate to a page/component where I passed the data from another component using both React hooks and useHistory, but I get undefined
- How do I get the new updated data from react hooks or useEffect?
- Cannot get a data on the table using react js
- How can I get the jsessionid from a response using react js?
- How to get row number of "parent" table in React-table from another react table in sub component?
- How to filter the data from an API in a ethical way? Im using react JS
- how to export the return table data to a csv file using react js
More Query from same tag
- What's the difference between npm run dev and npm run start in Next.js?
- React: how to pass instance to onClick without using an active index
- Where is data stored in React.js?
- How to make my images inline to the left of my component content?
- TypeError: prevState.blockHash is not iterable
- React Redux Test failed because it can't fetch data throught action
- Sending a file in POST in react (request api)
- How to add minutes to string date
- Proxy property isn't working in package.json
- How to set expiration time for data stored in ReactJs localStorage
- How to link a react tab to a dropdown?
- React Input Form Value In An Array
- Reactjs select value opition value map iteration with default value
- Connect two actions to one reducer?
- How to test Parent passing `this` to Children using enzyme
- Testing subsequent function call on an Async function from React function component
- Testing Api with Next.Js in Jest
- React event listeners based on changes in state made with Redux
- How can render the same card with different values based on user input in a form?
- toggle effect with react
- Try to upload file with axios post request
- React Router v4 on change
- Pass a variable to a static google image map
- React onMouseEnter and onMouseLeave not behaving consistently
- Displaying contents of directory(markdown files) in Gatsby using graphql
- React useEffect inside async function
- How to redirect to login with react-router
- How to get firestore instance with react-redux-firebase?
- Setting state of parent component in child component (where it's used as a prop) via Context API - does not trigger componentDidUpdate
- How do I save this in firestore the way I want it to be to be structured?