[insin]

> On the other hand, when using a template language I can put `foreach` loops and `if` conditions right into the template itself. And when using JSX I need to calculate the result of a `for` loop before the actual template and it looks much more complex and cumbersome.

You can inline eqivalent JavaScript statements in JSX, without typical template language limitations in terms of allowed expressions or scope:

    {this.props.foo > 5 && <div>...</div>}

    {this.props.foos.map(foo => <div>{foo}</div>)}

[xtrumanx]

You've gotta admit though that inlining isn't the usual case. Especially if you're not using ES6 and the component your inlining is a few or more lines long.

[insin]

That's not been my experience - multiple lines nest quite nicely - but even when directly inlining isn't suitable (e.g. multiple if/else checks or rendering a list in a way which doesn't suit a straight .map()) I prefer creating another method and inlining the call to it, e.g. from my Hacker News API clone:

    <ol className="Items__list" start={page.startIndex + 1}>
      {this.renderItems(page.startIndex, page.endIndex)}
    </ol>

[bryanlarsen]

It depends on who's doing the coding. I've got some inlined loops that are ~20 lines long, and I think it works & looks better than assigning the loop to a variable before the render and inlining the variable.