4 ms·
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/> }}
by untog 11y ago
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...
- gberger 11y agoYou 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 11y agoHuh. 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.
- esailija 11y agoThat 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.
- supernintendo 11y agoGenerally 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 11y agoIs it just me, or is the return missing in the `function` (or am _I_ missing something :)? Not important of course, just pointing it out...
- supernintendo 11y agoGood catch! I wrote that example in a hurry on my lunch break so I take accountability for the mistake.
- gberger 11y agoIf you omit the {} you can then also omit the return. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...