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

gberger · on March 15, 2016

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`).

untog · on March 15, 2016

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.

_qbjt · on March 15, 2016

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

freekh · on March 15, 2016

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...

_qbjt · on March 15, 2016

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

gberger · on March 15, 2016

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

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

couchand · on March 16, 2016

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

gberger · on March 16, 2016

Guess I was also in a hurry!

esailija · on March 15, 2016

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.