Suppose, I want to render 3 buttons which are mapped from Array
export const homePage = soruces => {
const array$ = xs.fromArray([1,2,3])
return {
DOM: array$.map(e => {
return <button id={e}>click</button>
})
};
};
but I only get the lastest button which has id of 3
<div id="app">
<button id="3">click</button>
</div>
how do i get all the buttons rendered like this using xstream or rxjs
<div id="app">
<button id="1">click</button>
<button id="2">click</button>
<button id="3">click</button>
</div>
That depends a bit on what you want to achieve. The code you have there basically says: "I get three pieces of data, each at some arbitrary point of time" (because
fromArray
basically takes the data from the array one by one and puts it into the stream. If you now what to collect the data over time, you can addfold((buttons, newButton) => buttons.concat(newButton), [])
.If however you just happen to have three poeces of data, that always should be three buttons, do not use
fromArray
but the normalArray.map
. You can then usexs.of
to emit the three buttons at once (compared to one by one in the first part)