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.

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>
</>
)
}