score:1
react component trees aren't html strings, they're object trees. you need to have a tr
object, provide it with a bunch of td
children, and then switch to a new tr
object and provide its children to it.
ideally, change how you're storing grid
so that it contains the rows, with child objects/arrays for the cells.
if you can't do that, you can do it on the fly:
const rows = [];
let children = [];
for (const item of grid) {
if (grid.x === 0 && children.length) {
rows.push(children);
children = [];
}
children.push(item);
}
if (children.length) {
rows.push(children);
}
then to render:
{rows.map((children, index) => (
<tr key={index}>
{children.map(item =>
<td id={`td_${item.x}_${item.y}`}>
{item.name}
</td>
)}
</tr>
))}
you'll want to double-check that for minor typos, etc., but it's the fundamental idea: build an array of rows, with arrays of cells inside.
Source: stackoverflow.com
Related Query
- Render Table <tr> tag based on condition in ReactJs within map loop
- ReactJS how to memoize within a loop to render the same component
- How do you render or not render table data based on conditions, using a loop in React JS?
- Beginner : Loop with condition in table reactJS
- How would I loop through this array and render a table based on Regex?
- Reusing properties within map loop in ReactJS - best practice
- How to Loop an Array Using Map Function Based on Condition and Then setState?
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- Reactjs Render component dynamically based on a JSON config
- how to update input text which is render by array map in REACTJS
- Using ReactJS to render components within Aurelia
- React won't render within map function
- Reactjs unexpected infinite loop with render
- Render 2 table rows in ReactJS
- Dynamically load .css based on condition in reactJS application
- Render one of the children based on condition
- Reactjs condition inside map function
- Loop an array index inside a map in ReactJS
- Render component based on a variable - reactjs
- ReactJS 7 - How to conditionally change the background color of table cell only (not the row) based on its value?
- Modal within a table in MDBootstrap for reactjs
- Render a state based on a condition with Hooks (Building a simple rock paper scissors game)
- Conditional Statement Within Map Loop
- Return multiple <td> from map without wrapping them within an enclosed tag
- colour one row of antd table based on condition
- ReactJS high order components not forwarding property in a render loop
- render custom component on table based on the value of my data object?
- Reactjs - How do I check to see if a user clicks a textbox within a table row?
- Render JSX element based on condition
- Render a table body in react using the map function
More Query from same tag
- Access function of react app in order to use On send feature for Outlook add-ins
- React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample code
- How to make svg RTL
- React Hooks state is not updating with correct output
- Do you need to save a file locally before sending it to a mongo db?
- useState not working inside a custom react hook
- React Router v5: 404 when use url directly or refresh page on route different from "/"
- HOC example in React+Typescript doesn't work
- State JSX component not updating
- How to render React.js properly - not rendering
- change table column width
- Unable to read the json object stored in React state
- How can I use Next.js redirects?
- It is OK to do in this way? (dispatch store) Redux
- How to add horizontal scroll in Material UI grid
- How to test component with API call in react?
- Persisting the State to the Local Storage with Redux and Saga
- What does renderSortByOptions() do?
- jump-player-tab-container.js:129 Uncaught (in promise) ReferenceError: isActive is not defined(…)render @ jump-player-tab-container.js:129
- ReactJS ReferenceError: exports is not defined
- How to get the react-datetime date?
- How to secure edit form route?
- Interpolate a component into a string
- How to avoid anonymous function in react
- How to re-render a page by updating the state In React using functional component.?
- Testing Api with Next.Js in Jest
- Material-UI - Can I selectively enable Button ripple?
- How to override MUI button, so that the color prop still works
- Mocking cross-fetch
- Ripple effect opacity in React Material UI