score:3
you need to create it react
way. your createtable
method should look something like below.
createtable(tabledata) {
return (
<table>
<tbody>
{
tabledata.map(rowdata => {
return (<tr key={rowdata.id}>
{
rowdata.map(celldata => {
return (<td key={celldata}> {celldata} </td>);
})
}
</tr>);
})
}
</tbody>
</table>
)
note: you need to put in a unique key for the root of jsx inside the 'maps'. identify the unique key for each iteration. as a last resort you can use index
, but that is not recommended.
edit: updated for new changes
in your updated code, the td
is empty and hence its displayed empty on the page.
other changes you would require
your initial state should not generate an jsx. it should be used only to compute the initial state and return a plain object. you are returning a object that contains array of jsx elements in it, which fundamentally defeats the purpose of react that it needs to require the dom to be dynamically updated appropriately based on prop
/state
changes. your initialstate
should only contain the data that is required to construct the needed dom elements.
getinitialstate() {
var array = [];
var cellsarray = [];
for (var i = 0; i < size; i ++) {
array.push(cellsarray);
for (var j = 0; j > size; j++) {
array[i].push(/* push data that you need to construct your cell */);
}
}
return {
array: array
};
}
then in your tabledata
function , you need to form the required jsx. this function is getting called inside of render
which is perfectly fine place to produce the dom elements.
var tabledata = this.state.array.map(rowdata => {
i++
return (
<tr key={i}>
{
rowdata.map(celldata => {
return <cell key={celldata} data={celldata} start={this.props.start} />
})
}
</tr>
);
})
finally in your cell
, render
method you need to pass some children for td
for it to be visible on the screen. in you question its empty and so the image you have posted showing the dom elements and it being empty is the right behaviour. you need to do something like below
render() {
return (<td onclick = {this.handleclick} classname={this.state.selected ? "cell selected" : "cell"}>
{this.props.data }
{ /* or whatever data you want to be put here */ }
</td>);
}
Source: stackoverflow.com
Related Query
- How to render programmatically created table in React?
- How to fix my React Context to render useEffect and reload table data
- How to render a table in React by using Blueprint
- How to display JSON data inside render as table in React
- How to map over 2 Array of object in React and render to Table
- How do I re render the entire React Pivot Table UI component when I change the selection in select tag?
- How to render an element in React which was created by createElement()?
- How to re render table component upon receiving a notification from web socket in React JS?
- How to test child React component created in Render with React.createElement()
- how to render a specific field dynamically in Material Table React
- How do you render or not render table data based on conditions, using a loop in React JS?
- How do you render classes dynamically using conditioning on a table on React Bootstrap?
- How to render matrix table form array in react
- How to render dynamic table in React
- How to render data horizontally in table ( react )?
- How to map over 2 Array in React and render to Table
- how to render table from json input react
- How to render list of users from firestore and display it in a table form on web page using react js?
- React.js: How do I force a react table to render again after saving? (hooks)
- how to render the correct date from table in mysql in react js
- How to selectively render react table components?
- How to render state arrays in React in table
- How can I render and output data table in react js
- How to render react components by using map and join?
- How to create dynamic href in react render function?
- How to render a multi-line text string in React
- How can I render repeating React elements?
- How can I render HTML from another file in a React component?
- How do I render Markdown from a React component?
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
More Query from same tag
- How to avoid arrow function while passing prop values to another component?
- cannot toggle checkbox using Redux dispatch
- navigator getcurrentlocation calls forever
- Consoling React
- How to update object state using useState hook
- Reactjs FormControl Date
- improve setState with TextInput or Pickers in React & ReactNative & ES6
- How do I render the selected options differently compared to those in the list with react-select
- MobX + React. Reactions. Is it possible to listen to actions?
- react-router v4: Determine if route has been matched from outside the component
- "Object has no property _set" in Django
- Cannot render value of props from redux state
- Add new columns container every 3 column elements in React.js with Bulma.css
- open a dialogue box just like model but attached to the element
- React server-side fetch (asynchronous rendering)
- Using event listener should we use useCapture as false to support old browser or it will be used as default for every browser
- value is not shown in the field when using redux form
- onClick method handling calls error - is not defined no-undef
- Conditionally render a React component depending on a descendant's render
- Filtering Data By Full Name React
- React Spring - Animate list - one item in list at a time
- Next.js GetServerSideProps custom wrapper TypeScript
- How to pass a derived object to another component without triggering unecessary re-rendering?
- Stop upload/process ant-design Upload component on beforeUpload event
- react setState change hour using moment
- How do I unmount a div generated by a loop using id's in React.js?
- React redux dispatch action to connect to mqtt
- Next JS how to Redirect user based on the IP address?
- React Day Picker: How to disable interaction with disabled dates in "Select Multiple dates"
- ReactJS Assigning Value inside a class component method to props