How to render array of object?

const jsx = []
for (var i = 0; i < 25; i++) { 
    var row = document.createElement('div');
    row.className = 'row row' + (i + 1);
    row.id = 'row' + (i + 1);
    for (var j = 0; j < 25; j++) {
        var node = document.createElement('div');
        node.className = 'node node' + ((i * 10) * (j + 1));
        node.id = 'node' + count;
        count++;
        row.appendChild(node);
    }
    jsx.push(row);
}    
  

return (
    <div className='maze'>
       {jsx}
    </div>
)

Error Cannot render object use array instead
this code is running in javascript

bassicaly i want 25 div and in each div append 25 div child appended can you suggest react approach to do this

Answer

In React you can just “describe” the HTML you want, i.e. <div>....</div>. There’s no need really to create elements, that’s what React does.

You could generate 2 arrays, each of length you need, and map them to the JSX you want.

Example 10×10:

const App = () => [...Array(10).keys()].map(row => (
  <div key={row}>
    (row {row})[
    {[...Array(10).keys()].map(col => (
      <span key={col}>[{col}]</span>
    ))}
    ]
  </div>
));

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />