Creating a ZxZ table in React/JSX using for loops-CodePudding

I'm trying to create a 5x5 table where each cell is a button, using React/JSX. The below throws an error in SandBox:

import "./styles.css";
import React from "react";

const makeCell = () => {
  return ( 
     <td>
       <button/>
     </td>
     )
};

const makeRow = () => {
  return( 
    <tr>
      {
        for (let=i; i<=5; i  ){
          makeCell();
        }
      }
    </tr> 
  )
};

const makeTable = () => {
  return( 
    <table>
      {
        for (let=i; i<=5; i  ){
          makeRow();
        }
      }
    </table> 
  )  
};

export default function App() {
  return (
    <div>
      <makeTable/>
    </div>
  );
}

/src/App.js: Unexpected token (16:8) 14 | 15 | { > 16 | for (let=i; i<=5; i ){ | ^ 17 | makeCell(); 18 | } 19 | } browser

Parsing error: Unexpected token 14 | 15 | { > 16 | for (let=i; i<=5; i ){ | ^ 17 | makeCell(); 18 | } 19 | } (null)

What is the easiest and most concise way to generate an ZxZ table in React? And could you explain why this approach isn't working?

CodePudding user response：

Codesandbox link: https://codesandbox.io/s/amazing-frog-c5h6hv?file=/src/App.js


export default function App() {
  return (
    <Table />
  );
}

const Table = () => {
  return (
    <table>
      <tbody>
        {Array(5)
          .fill(null)
          .map((_, index) => (
            <Row key={index} />
          ))}
      </tbody>
    </table>
  );
};

const Row = () => {
  return (
    <tr>
      {Array(5)
        .fill(null)
        .map((_, index) => (
          <Cell key={index} />
        ))}
    </tr>
  );
};


const Cell = () => {
  return (
    <td>
      <button>hello</button>
    </td>
  );
};