Identifier expected JSX for loop Eslint error

Question

im new to react and try to build some code in JSX. but when i trying to automate the tags using for loop it give me a Eslint error.

<table className="TableData">

    
    
let num= 9;



  <thead>
    <tr>
      <th>Week</th>


       for(let i=0; i <num; i++){
        return <th> {i+1}</th>;
        } 
     

      <th>Win</th>
      <th>Lose</th>
    </tr>
  </thead>

Answer 1

A common approach to render some JSX for each item in an array is to use Array.map.

If you only have a number but no array, you can still create an array with new Array(9).fill(null)

export default function App() {
  let num = 9;
  return (
    <div className="App">
      <table className="TableData">
        <thead>
          <tr>
            <th>Week</th>
            {new Array(num).fill(null).map((_, i) => {
              return <th>{i}</th>;
            })}
            <th>Win</th>
            <th>Lose</th>
          </tr>
        </thead>
      </table>
    </div>
  );
}

Answer 2

First, using return inside the for loop will exit the for loop.

Check here how to create the array: How to create an array containing 1...N

You can try something like this:

const num = 9;
const foo = [];

for (let i = 1; i <= num; i++) {
   foo.push(<th>{i+1}</th>);
}

And then insert it inside JSX:

<th>Week</th>
   {foo}
<th>Win</th>