hyperscriptで連続した要素をレンダリングしたい場合各要素にKEYをもたせておく

hyperscriptでもJavascriptのmap関数をつかう事で、
連想配列の中身を連続してレンダリングする事ができます。
子要素のliタグなんかを生成する時には特に有効ですね。

ここで気をつけなければならない事として
同一のセレクターである場合、
識別用のIDを振っておかないと予期せぬ動作をする可能性があるという事です。
面倒でも固有のIDを振っておきましょう。

実際のところ

var h     = require("hyperscript")                                                       
var items = [{id: 0, text: "hoge"},{id: 1, text: "fuga"},{id:2, text: "piyo"}]           
var obj   = h("ul", [                                                                    
    items.map(function(item) {                                                           
        return h("li", {key: item.id}, [item.text]);                                     
    })                                                                                   
])

console.log(obj.outerHTML)                                                               
//=> <ul><li key="0">hoge</li><li key="1">fuga</li><li key="2">piyo</li></ul>

参考もと

• dominictarr/hyperscript · GitHub
• Three rules