Hacker News Reader

Comment by _qbjt | Hacker News Reader

This article includes a tweet which demonstrates a very contrived example of a for loop using JSX. If you're ever writing code like this, please reevaluate your career in software development.

As an aside, we recently moved from Nunjucks templates to React / JSX at work and the frontend team couldn't be more pleased. Components reflect improvements made to them across the board and provide a happy medium between designer and JS dev. I have also found a lot of power in refs by implementing superclass functions that provide reusable logic for elements based on the key of the ref when certain functions are implemented on the corresponding component. This can be used for state persistence in forms, analytics or anything else the developer imagines.

Context switching has not been an issue but all of our frontend devs also do work on the backend. This may be an issue to consider for teams that don't embrace cross disciplinary roles.

View on HN

"If you're ever writing code like this, please reevaluate your career in software development."

That's a pretty nasty comment to make about anyone in this industry over a simple 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.

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.

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!

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.

Are you referring to .map()? Its a standard array method in every language with first-class functions. Why would you prefer a for loop?

Well, it's a negative example. So you and the tweet are saying the same thing

Reply on news.ycombinator.com