Yield nicer code in JSX
Rendering a list of items in JSX is usually done with Array.map
class MyComponent extends React.Component
render() {
return <div>
{ store.items.map(item => <span>{item}</span>) }
</div>
}
}
While the above approach in fact works, it has too issues:
- Does not support
for...of
and the ES6 iteration protocol - Handling conditional display is awkward, for example
- Do not render
item
ifitem.visible
isfalse
- Display items until their price field totals at 100
- Display only the fist 10 items, the first 3 with some different markup
- Do not render
Whatever solution you choose you’ll probably end up dynamically constructing
an array of result elements and return that from JSX.
One clean and fun way for that is spreading out generator functions
:
class MyComponent extends React.Component
renderItems*(maxCount, maxSumPrice) {
let count = 0
let sumPrice = 0
for(product of store.items) {
sumPrice += product.price
if (count++ < maxCount && sumPrice < maxSumPrice) {
if (count < 4) {
yield <ProductTile product={product} />
} else {
yield <ProductLink product={product} />
}
}
}
}
render() {
return <div>
{[...this.renderItems(10, 100)]}
</div>
}
}