how do I rendering multiple components using xstreamjs

Question

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>

score 0 · Answer 1 · answered Jun 03 '20 at 17:02

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 add fold((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 normal Array.map. You can then use xs.of to emit the three buttons at once (compared to one by one in the first part)

how do I rendering multiple components using xstreamjs

1 Answers1