I apologize and you are correct in stating this. Less experienced developers may come across these sorts of mistakes when conflating JSX with templating languages that contain logic constructs (Handlebars et al). It is important to clarify.

To be more constructive, I believe an understanding of when to use the right tool for the right job is paramount to a good software developer. JSX nodes are suitable for representing UI components but certainly not control statements such as a for loop.

Well, it is just plain wrong. Even if you wanted to do a for loop in JSX you'd do

    <div>
        {for (var x=0;x<10;x++) {
            <div/>
        }}
    <div>

Not a templated component like that. That said, I have created repeater components and the like before, largely because JSX is so friendly that more design-minded people can use it very easily.

EDIT: turns out that doesn't actually work, ha. I've never written JSX that way.

    <div>
        {[0,1,2,3].map((i) => {
            <div/>
        }}
    <div>

on the other hand...

You just proved the author's point. The JSX you provided is invalid, since you can't pass `for` as a function argument (see his equivalent bit about `if`).

Huh. Well, my only defense is that I would never even try to write JSX like that anyway - the actual JS in my JSX templates is basically just Array.map calls.

Generally speaking, I do not recommend this pattern. My preference is to handle enumeration within a function, for example:

  <ul>
    {this.listItems(items)}
  </ul>

Then, within a function implemented on the same component:

  listItems: function(items) {
      items.map((item) => {
          return <li>{item.name}</li>
      });
  }

Is it just me, or is the return missing in the `function` (or am _I_ missing something :)? Not important of course, just pointing it out...

Good catch! I wrote that example in a hurry on my lunch break so I take accountability for the mistake.

If you omit the {} you can then also omit the return.

https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...

True but irrelevant, the GP is talking about the top level function, not the fat arrow one.

Guess I was also in a hurry!

That shouldn't work since syntactically you are in a middle of a function call where you can only have expressions. This is funny because one of the author's point was that JSX makes that confusing because you would never think to write `callFunction(for (var i = 0; ...))` normally.