I tried to render diferent html elemnents inside a for loop but I get an error

import React from 'react';

function MacroCategory(props) {

  
    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th>CATEGORY</th>
                        <th>DESCRIPTION</th>
                        <th>RESULTS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <ul className="onePage_bar">
                                {//here I get an unexpected token error
                                    for(let i = 1; i <=4; i  ){
                                        if( i < props.macrocategory_score.macroDescription.level ){
                                            <li className="onePage_level-0"></li>
                                        }else{
                                            <li className={`onePage_level-${ props.level}`}></li>
                                        }
                                    }

                                }
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    )

}

export default MacroCategory;

I tried to sorround the for with a return but doesn't work, I'm not sure what is the problem

CodePudding user response：

you can't use a for loop inside JSX, build the array before rendering :

import React from 'react';

function MacroCategory(props) {
    const data = []

    for (let i = 1; i <= 4; i  ) {
        if (i < props.macrocategory_score.macroDescription.level) {
            data.push(<li className="onePage_level-0"></li>)
        } else {
            data.push(<li className={`onePage_level-${props.level}`}></li>)
        }
    }

    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th>CATEGORY</th>
                        <th>DESCRIPTION</th>
                        <th>RESULTS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <ul className="onePage_bar">
                                {data}
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    )

}

export default MacroCategory;

CodePudding user response：

Using a for loop in a JSX template like this is not a valid syntax.
Here are some alternatives:

1. Use an IIFE:

<ul className="onePage_bar">
   {(() => {
      for(let i = 1; i <=4; i  ) {
         ...
      }
   })()
</ul>

2. Use a variable and populate it outside of the template:

const elements = []

for (let i = 1; i <= 4; i  ) {
   ...
}

3. Build a map function in template:

<ul className="onePage_bar">
   {[1,2,3,4].map(() => {
      ...
   })}
</ul>