How to use inline while and for loops in React JSX

Last updated : Jul 30, 2023 12:00 AM

In JSX, you cannot directly use a while loop. JSX is primarily designed for rendering UI elements and doesn't support control structures like loops. However, you can use JavaScript to create the elements you want to render inside a loop and then return the resulting array in your JSX code.

If you must utilize a while loop in JSX, here's an unconventional approach to achieving this.

IIFE while loop

export const SurveyResults = () => {
    return (
        <>
            <p>How satisfied are you with our service?</p>
            <ol type="1">
                {
                    (
                        () => {
                            let li = [];
                            let lines = 10
                            while (lines > 0) {
                                li.push(<li key={lines}><input type="radio" name="score" /></li>)
                                lines --
                            }
                            return li
                        }
                    )()
                }
            </ol>
        </>
    )
}

I am rendering ten radio buttons to represent a survey satisfaction score.

Figure 1: React JSX inline for/while loop

I use an Immediately Invoked Function Expression (IIFE) to create a list of <li> elements with radio buttons. The IIFE is a JavaScript function defined and executed immediately after creation. In this case, it runs a while loop and generates the list of items within the JSX.

Here is the exact implementation done with a for loop.

IIFE for loop

export const SurveyResults = () => {
    return (
        <>
            <p>How satisfied are you with our service?</p>
            <ol type="1">
                {
                    (
                        () => {
                            let li = [];
                            for (let i = 1; i <= 10; i++) {
                                li.push(<li key={i}><input type="radio" name="score" /></li>);
                            }
                            return li;
                        }
                    )()
                }
            </ol>
        </>
    )
}

What is the correct way to use a while/for loop in JSX?

The correct way is to create the elements I want to render inside a loop and then return the resulting array in the JSX code. Here's an example using a while loop in JSX.

Proper implementation

export const SurveyResults = () => {
    const renderRadioButtons = () => {
        let li = [];
        for (let i = 1; i <= 10; i++) {
            li.push(<li key={i}><input type="radio" name="score" /></li>);
        }
        return li;
    }
    return (
        <>
            <p>How satisfied are you with our service?</p>
            <ol type="1">
                {renderRadioButtons()}
            </ol>
        </>
    )
}

How to use inline while and for loops in React JSX

What is the correct way to use a while/for loop in JSX?

Related Links

By: Lance