How to render array of object?

Question

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

Basically, I want 25 divs, and in each div 25 div children. Can you suggest react approach to do this?

Have you tried to follow the React tutorial? You'll figure out yourself. — Silviu Burcea
– Silviu Burcea, Commented Sep 14, 2021 at 8:06

Drew Reese · Accepted Answer · 2021-09-14 08:13:01Z

1

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 10x10:

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" />

answered Sep 14, 2021 at 8:13

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neel Dsouza · Accepted Answer · 2021-09-14 08:17:08Z

1

You can write something like this

<div className=''>
        {new Array(25).fill(0).map(div => {
          <div className="">
            {new Array(25).fill(0).map(innerDiv => {
              <div className=""></div>
            })}
          </div>
        })}
        </div>

answered Sep 14, 2021 at 8:17

Neel Dsouza

1,5695 gold badges16 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to render array of object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related