Conditional rendering in cycle.js with RxJS

Question

I have a fairly simple conditional rendering script, where if props.showCalcis true, I will display calculator, but if false, I will display title:

function view(sources) {
  const props$ = sources.props
  const titleVDom$ = Title(sources).DOM
  const calcVDom$ = Calculator(sources).DOM
  const vdom$ = props$
    .map((props) =>
      <section className="hero is-fullheight is-primary">
        <div className="hero-head">
        </div>
        <div className="hero-body">
          {props.showCalc ? {calcVDom$} : {titleVDom$}}
        </div>
        <div className="hero-foot">
        </div>
      </section>
    )
  return vdom$
}

This does not work because you cannot pass the DOM stream to JSX for rendering. I always had to map the DOM stream to render it.

How can I display {calcVDom$}or {titleVDom$}in this scenario? Like them, they display "undefined" because they are threads.

I tried to display calcVDom$/ titleVDom$halfway down the render function, but it got really dirty.

Answer 1

JSX? -

function view(sources) {

  const props$ = sources.props;
  const titleVDom$ = Title(sources).DOM;
  const calcVDom$ = Calculator(sources).DOM;

  const vdom$ = props$
    .mergeMap((props) => titleVDom$.map((title) => [ props, title ]))
    .mergeMap((data) => calcVDom$.map((calc) => data.push(calc)))
    .map((data) =>
      <section className="hero is-fullheight is-primary">
      <div className="hero-head">
      </div>
      <div className="hero-body">
        {data[0].showCalc ? {data[2]} : {data[1]}}
      </div>
      <div className="hero-foot">
      </div>
    </section>
  );

  return vdom$;
}

, forkJoin:

function view(sources) {

  const props$ = sources.props;
  const titleVDom$ = Title(sources).DOM;
  const calcVDom$ = Calculator(sources).DOM;

  return Rx.Observable.forkJoin([
    props$,
    titleVDom$,
    calcVDom$
  ]).map((data) =>
      <section className="hero is-fullheight is-primary">
      <div className="hero-head">
      </div>
      <div className="hero-body">
        {data[0].showCalc ? {data[2]} : {data[1]}}
      </div>
      <div className="hero-foot">
      </div>
    </section>
  );
}

, forkJoin Observables ( ) , mergeMap , , ( ) .