How to use the @cycle/dom.p function in @cycle/dom

function getTrainData(data){
    return li(".train", [
        div(".train-data",
        [
            p(".stationName .col", [span("station: "), data.stationName]),
            p(".platform", [span("platform: "), data.platformName]),
            p(".current-location", [span("current location: "), data.currentLocation]),
            p(".arrival-time: ", [span("expected arrival time: "), moment(new Date(data.expectedArrival)).format("HH:MM - Do MMM YYYY")])
        ]
    )])
}

return div([
        h1("Create User"),
        menu({navi}),
        br(),
        div(".form-element", [
          label({htmlFor: "username"}, "Username:"),
          br(),
          input("#username", {type: "text", value: formatString(form.username), autocomplete: "off"}),
          p(errors.username),
        ]),
        div(".form-element", [
          label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", value: formatString(form.email), autocomplete: "off"}),
          p(errors.email),
        ]),
        div(".form-element", [
          label({htmlFor: "points"}, "Points:"),
          br(),
          input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
          p(errors.points),
        ]),
        div(".form-element", [
          label({htmlFor: "bonus"}, "Bonus:"),
          br(),
          input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
          p(errors.bonus),
        ]),
        button("#submit.form-element", {type: "submit", disabled: !model}, "Create"),
      ])
    }

label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", value: formatString(form.email), autocomplete: "off"}),
          p(errors.email),
        ]),
        div(".form-element", [
          label({htmlFor: "points"}, "Points:"),
          br(),
          input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
          p(errors.points),
        ]),
        div(".form-element", [
          label({htmlFor: "bonus"}, "Bonus:"),
          br(),
          input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
          p(errors.bonus),
        ]),
        button("#submit.form-element", {type: "submit", disabled: !model}, "Create"),
      ])
    }
  )

label({htmlFor: "username"}, "Username:"),
          br(),
          input("#username", {type: "text", value: formatString(form.username), autocomplete: "off"}),
          p(errors.username),
        ]),
        div(".form-element", [
          label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", value: formatString(form.email), autocomplete: "off"}),
          p(errors.email),
        ]),
        div(".form-element", [
          label({htmlFor: "points"}, "Points:"),
          br(),
          input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
          p(errors.points),
        ]),
        div(".form-element", [
          label({htmlFor: "bonus"}, "Bonus:"),
          br(),
          input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
          p(errors.bonus),
        ]),
        button("#submit.form-element", {type: "submit", disabled: !model}, "Create"),
      ])
    }
  )

DOM: sinks.DOM.map(dom =>
            div([h3('Horizontal too!'), p('this is running with RxJS'), dom])
        )

].concat(pusherMessages.map(({ text, username, time }) => {
          return div({ className: 'message' }, [
            div({ className: 'avatar' }, [
              img({ attributes: { src: `https://twitter.com/${username}/profile_image?size=original` } })
            ]),
            div({ className: 'text-display' }, [
              div({ className: 'message-data' }, [
                span({ className: 'author' }, username),
                span({ className: 'timestamp' }, strftime('%H:%M:%S %P', new Date(time))),
                span({ className: 'seen' }),
              ]),
              p({ className: 'message-body' }, text)
            ])
          ])
        }))),
        div({ className: 'action-bar' }, [

function renderInputSwitcher (state) {
  return (
    div('.input-switcher', [
      p('.switcher .up', [upArrow]),
      p('.switcher .down', [downArrow])
    ])
  );
}

function renderInputSwitcher (state) {
  return (
    div('.input-switcher', [
      p('.switcher .up', [upArrow]),
      p('.switcher .down', [downArrow])
    ])
  );
}

div([
                    h3(
                        a([
                            'Preguntas frecuentes ',
                            span('.icon.icon-arrow-right'),
                        ])
                    ),
                    p(
                        'Antes de preguntar algo te pedimos consultar está sección para saber si alguien más ya ha resuelto esa duda.'
                    ),
                ]),
                div([
                    h3(
                        a(['Desarrollo Libre ', span('.icon.icon-arrow-right')])
                    ),
                    p(
                        'Anzu es una plataforma de código abierto escrita por apasionados del software! Te invitamos a conocer nuestra misión y unirte.'
                    ),
                ]),
            ]),
        ]),
    ]);
}

const content$ = loaded$.map(loaded =>
    loaded
      ? commitListItemDoms$.map(commits => ul(commits))
      : xs.of(p(['Loading...']))
    ).flatten();