Hacker News Reader

Comment by untog | Hacker News Reader

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

View on HN

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.

Reply on news.ycombinator.com