title: Create elements dynamically with CycleJS
body: <p>I'm trying to learn some CycleJS and I ended up not knowing what to do exactly with this. The goal is to create inputs via configuration, instead of declaring them manually. The problem is I'm only getting rendered the last of the inputs from the array, instead of both. I'm assume the error is in <strong>view$</strong> and how I'm dealing with the stream.My naive implementation is this:</p>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>const sliderGunProps$ = xs.of({
    value: 30,
    id: 'gun'
  });
  
  const sliderCannonProps$ = xs.of({
    value: 70,
    id: 'cannon'
  });
  
  const propsConfig = [sliderGunProps$, sliderCannonProps$];
  
  function view$(state$) {
    return xs.fromArray(state$)
      .map(state =&gt; {
        return xs.combine(state.sliderVDom$, state.values)
          .map(([sliderVDom, value]) =&gt;
            div([sliderVDom, h1(value)])
        );
      })
      .flatten();
  }
  
  function model(actions$) {
    return actions$.map((action) =&gt; {
      const sliderVDom$ = action.DOM;
      const sliderValue$ = action.value;
  
      const values$ = sliderValue$.map(val =&gt; val);
  
      return {
        sliderVDom$: sliderVDom$,
        values: values$
      };
    });
  }
  
  function intent(sources) {
    return propsConfig.map(prop$ =&gt; Slider({
      DOM: sources.DOM,
      props$: prop$
    }));
  }
  
  function main(sources) {
    const actions$ = intent(sources);
  
    const state$ = model(actions$);
  
    const vdom$ = view$(state$);
  
    const sink = {
      DOM: vdom$
    };
  
    return sink;
  }
  </code></pre>
  
  <p>Thanks!</p>