Cycle.js - Insert component in jsx of another component

Question

I want to embed the cycle.js component inside jsx.

I saw examples in the documentation for embedding components inside other components, but not when using JSX, and I cannot find examples on the Internet. I am completely new to all reactive stuff like RxJs.

In the example in the documentation, they just look like a plonk child component in the parent component (now I see that they pass it in to the xs.combine () function):

  const childVDom$ = labeledSlider.DOM;
  const childValue$ = labeledSlider.value;

  const vdom$ = xs.combine(childValue$, childVDom$)
    .map(([value, childVDom]) =>
      div([
        childVDom,
        div({style: {

But when I do this in JSX, it makes it just return undefined to the DOM where the component goes (see below the bottom of this code):

import { html } from 'snabbdom-jsx'
import * as dom from '@cycle/dom'
import Button from 'components/button'
import Rx from 'rxjs/Rx'
import styles from './index.styl'

export default function Title(sources) {
  const sinks = {
    DOM: view(sources)
  }
  return sinks
}

function view(sources) {

  const props$ = Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
  const vdom$ = props$
    .map(() =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {button.DOM}<------- component
      </div>)

  return vdom$
}

Now the DOM button is observable:

import Rx from 'rxjs/Rx'
import { html } from 'snabbdom-jsx'

export default function Button(sources) {
  const sinks = {
    DOM: view(sources)
  }
  return sinks
}

function view(sources) {
  const props$ = sources.props
  const vdom$ = props$
    .map(props =>
      <a className="button is-primary is-large is-outlined">
        {props.label}
      </a>
    )
  return vdom$
}

How to add it to jsx without undefined? I am using RxJs.

EDIT: , undefined, , :

function view(sources) {

  const props$ = Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
const childVDom$ = button.DOM
  const vdom$ = Rx.Observable.of(childVDom$)
    .map((childVDom) =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {childVDom}
      </div>)

  return vdom$
}

Answer 1

button.DOM , . . :

function view(sources) {

  const props$ = Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
const childVDom$ = button.DOM
  const vdom$ = childVDom$
    .map((childVDom) =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {childVDom}
      </div>)

  return vdom$
}