How to use the react-dom-factories.ul function in react-dom-factories

renderConfig(config) {
    const configs = [
      { name: "dir", label: "direction" },
      { name: "theme", label: "theme" }
      // Hiding hotReloading option for now. See Issue #242
      // { name: "hotReloading", label: "hot reloading", bool: true }
    ];

    return dom.ul(
      { className: "tab-list" },
      configs.map(c => {
        return dom.li({ key: c.name, className: "tab tab-sides" },
          dom.div({ className: "tab-title" }, c.label),
          c.bool ? dom.input({
            type: "checkbox",
            defaultChecked: config[c.name],
            onChange: e => this.onInputHandler(e, c.name)
          }, null) : dom.div({
            className: "tab-value",
            onClick: e => this.onConfigContextMenu(e, c.name)
          }, config[c.name])
        );
      })
    );
  }

render() {
    const { targets, paramName } = this.props;

    if (!targets || targets.count() == 0) {
      return dom.div({}, "");
    }

    let tabClassNames = ["tab"];
    if (targets.size === 1) {
      tabClassNames.push("active");
    }

    return dom.div(
      { className: "launchpad-tabs" },
      dom.ul(
        { className: "tab-list" },
        targets.valueSeq().map(
          tab => dom.li({
            className: classnames("tab", {
              active: targets.size === 1
            }),
            key: tab.get("id"),
            tabIndex: 0,
            role: "link",
            onClick: () => this.onTabClick(tab, paramName),
            onKeyDown: e => {
              if (e.keyCode === 13) {
                this.onTabClick(tab, paramName);
              }
            }
          },

renderFeatures(features) {
    return dom.ul(
      { className: "tab-list" },
      Object.keys(features).map(key => dom.li(
        {
          className: "tab tab-sides",
          key
        },
        dom.div({ className: "tab-title" },
          typeof features[key] == "object" ?
            features[key].label :
            key
        ),
        dom.div({ className: "tab-value" },
          dom.input(
            {
              type: "checkbox",
              defaultChecked: features[key].enabled,

if (this.props.supportsFirefox) {
      items.push(panelItems.Firefox.name);
    }

    if (this.props.supportsChrome) {
      items.push(panelItems.Chrome.name, panelItems.Node.name);
    }

    items.push(panelItems.Settings.name);

    return dom.aside(
      {
        className: "sidebar"
      },
      this.renderTitle(this.props.title),
      dom.ul(
        {
          className: "sidebar-links"
        },
        items.map(this.renderItem)
      )
    );
  }
}