How to use inline while and for loops in React JSX

Last updated : April 22, 2023

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.

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.

React JSX inline for/while loop
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.

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.

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>
        </>
    )
}
L Raney
By: L Raney
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Comments are disabled

No Comments