score:1
renderrows
is a function so you need to execute it. also you will need to update that function a bit:
export default class app extends component {
// ...
componentdidmount(){
var rows=[];
var self = this;
meteor.http.call("get", url ,function(error,result){
$.each(json.parse(result.content), function(key, value){
rows.push(value)
});
self.setstate({
rows: rows
});
});
}
renderrows(){
const rows = this.state.rows || [];
return rows.map(d => {
return(
<tr>
<td>{d[0]}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
</tr>
);
});
}
render(){
return(
<table>
{/* ... */}
<tbody>
{this.renderrows()}
</tbody>
</table>
)
}
}
score:1
another option, not using jquery and avoiding having a separate render function, is to use .map
react likes it if you have a unique key on each element in a list, so hopefully one of the fields on your row can serve this purpose.
render(){
return(
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
{this.state.rows.map(d => (
<tr key={d[0]}>
<td>{d[0]}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
</tr>
)}
</tbody>
</table>
)
}
you'll also need to set your initial state for rows to be []
rather than null
, in order for the first render to work.
Source: stackoverflow.com
Related Query
- Render table when getting data asynchronous
- React - this.state is null inside render when getting data from API
- Error when getting values from json to data table
- React onLoad event on image tag is not getting called when using conditional render
- How to deal with "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. " when using react-window to render table rows
- Re-rendering Table component when parent passes new or updated data
- Render is called twice when fetching data from a REST API
- AG-Grid React, trouble getting custom cell renderer to update when data changes. Function components are behaving differently than class components
- React - render data in a table
- React JS & Axios Render after getting response data
- Getting async data in a react material table component
- render a switch button on in material table when i am editing
- Ant Design table continues to show loading even when the table is populated by data
- How to fix my React Context to render useEffect and reload table data
- How do I connect my discriminators in mongoose to my parent document? Getting errors when trying to import data
- Invariant Violation when trying to render array of table row elements
- How to display JSON data inside render as table in React
- How to render data in react getting undefined state?
- React data components table does not render HTML
- render custom component on table based on the value of my data object?
- Getting undefined when trying to fetch data from an api - React
- Getting Undefined When Trying to Request Const Data From Reactjs File in my NodeJS Express API
- Getting current table data from Ant Design Table
- Getting Json using Axios and iterating over data in ReactStrap Table
- How to manage asynchronous state updates when using event handlers in render method?
- render data in component which getting from react redux?
- How do I re render the entire React Pivot Table UI component when I change the selection in select tag?
- How do I render a component when the data is ready?
- Type error when using render when defining table columns in material table React
- I have rendered some dummy data from an array but when i try to update it and then render it dynamically, it goes wrong. I have the code here below
More Query from same tag
- Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option
- Call my account list in render using map function in React
- webpack build failed
- Is it safe to store a JWT in localStorage with ReactJS?
- 'React' is defined but never used
- Where to send JWT Tokens?
- How to add color to a line-through click event within react?(without it changing the font color too)
- React adding css class without rerender
- React debouncing problem with useCallback
- problem with selector in react.js . If i use selector in react.js and if i export in one of the component it shows error in that selector part
- react-rangeslider don't show on bootstrap modal
- How to verify the username in the url
- How to update component based on container's state change
- Return multiple react components from a javascript function
- How to show loading indicator on top of the form?
- ReactJS - Maintaining a numeric value with useState hook
- React - history.push is not working- when only query is changed
- To use React FC on functions
- How to hide overflow text content in react
- Change the state input which is a JSON Object that is present inside an array of JSON
- I am not able to read authorization headers on server side with reactjs fetch and nodejs as REST apis project
- React.useState Hook only displaying length of object, not object itself
- --How to make this React/Redux code DRY
- Invalid Option: corejs is not a valid top-level option
- How to make a loop of components in render method?
- Can a handler method access another handler methods property?
- Comparing two Arrays.map values dynamically
- Hoy to add Locale to path using React js and i18next?
- How to define Typescript properties and types for a React Action Hook Store
- Dynamicall add field/value pairs in react hooks