How to use react-hyperscript-helpers - 10 common examples

public render() {
    const maps = this.readMaps();
    const mapElements = maps.map((mapPath: path.ParsedPath) => h(MapOption, { path: mapPath }));
    mapElements.push(h("option", { value: "", label: "Select Map" }));
    return h("form", `.${styles.setup}`, { onSubmit: () => this.addToQueue() },
      [
        h("div", `.${styles.selectForm}`, [
          h("div", `.${styles.botSelector}`, [
            h(BotSelector, {
              setPlayers: (players: IBotConfig[]) => this.setPlayers(players),
            }),
          ]),
          h("div", [
            "Map: ",
            h("select", {
              onChange: (evt: any) => this.handleMap(evt),
              value: this.state.map_path.name,
            }, mapElements),
          ]),
          h("div", [

public render() {
    const maps = this.readMaps();
    const mapElements = maps.map((mapPath: path.ParsedPath) => h(MapOption, { path: mapPath }));
    mapElements.push(h("option", { value: "", label: "Select Map" }));
    return h("form", `.${styles.setup}`, { onSubmit: () => this.addToQueue() },
      [
        h("div", `.${styles.selectForm}`, [
          h("div", `.${styles.botSelector}`, [
            h(BotSelector, {
              setPlayers: (players: IBotConfig[]) => this.setPlayers(players),
            }),
          ]),
          h("div", [
            "Map: ",
            h("select", {
              onChange: (evt: any) => this.handleMap(evt),
              value: this.state.map_path.name,
            }, mapElements),
          ]),
          h("div", [
            "Max turns: ",
            h("input", {
              type: "number",
              value: this.state.config.game_config.max_turns,
              onChange: (evt: any) => this.handleMaxTurns(evt),
            }),
          ]),
        ]),
        h("div", `.${styles.playContainer}`, [
          h("input", { type: "submit", value: "Play" }),
        ]),

render() {
    return h(Hero, { isColor: 'primary', isFullHeight: true }, [
      h(HeroHeader, [h(Navbar)]),
      h(HeroBody, [
        h(Container, { hasTextAlign: 'centered' }, [
          h1('.title', ['BottleBats 2.018']),
          h2('.subtitle', ['Coming this spring']),
        ])
      ]),
      h(HeroFooter, [h(Footer)]),
    ])
  }
}

render() {
    return [
      h(NavBar),
      h(Hero, '.push', {isColor: 'primary'}, [
          h(HeroBody, '#signup-page', [
            h(SignupBox)
          ])
      ]),
      h(Footer),
    ]
  }
}

render() {
    return [
      h(NavBar),
      div('#info', [
        h(What),
        h(How),
        h(WhereWhen),
        h(Features),
      ]),
      h(Footer),
    ]
  }
}

const bodyCells = grouped.map((contents, columnIndex) => {
        if (typeof(contents) === 'object') {
          return this.mpnCells(contents, rowIndex, columnIndex)
        }
        const error     = markPink(columnIndex) && contents === ''
        const className = columnIndex === 0 ? 'marked ' + markerColor(contents) : ''
        const cell = h(semantic.Table.Cell, {
          error,
          className,
        }, contents)
        return cell
      })
      const activePopup    = this.state.activePopup

const CNavLink = (props: NavLinkProps, children: Children) => {
  props.activeClassName = 'is-active';
  return h(NavLink, `.navbar-item`, props, children)
}

const bodyCells = grouped.map((contents, columnIndex) => {
        if (typeof contents === 'object') {
          return this.mpnCells(contents, rowIndex, columnIndex)
        }
        const error = markPink(columnIndex) && contents === ''
        const className =
          columnIndex === 0 ? 'marked ' + markerColor(contents) : ''
        const cell = h(
          semantic.Table.Cell,
          {
            error,
            className
          },
          contents
        )
        return cell
      })
      const activePopup = this.state.activePopup

basic: 'very',
      compact: true,
      tableData,
      renderBodyRow(args) {
        return h(
          semantic.Table.Row,
          {key: String(args)},
          args.map(text => {
            return h(semantic.Table.Cell, text)
          })
        )
      }
    })
    let button
    if ((part.specs || []).length > 4) {
      button = h(div, {style: {display: 'flex', justifyContent: 'center'}}, [
        h(
          semantic.Button,
          {
            onClick: this.toggleExpanded,
            size: 'tiny',
            basic: true
          },
          this.state.expanded ? '⇡' : '...'
        )
      ])
    }
    return h(semantic.Popup, custom, [
      div({className: 'topAreaContainer'}, [
        h(
          div,
          {

renderBodyRow(args) {
        return h(
          semantic.Table.Row,
          {key: String(args)},
          args.map(text => {
            return h(semantic.Table.Cell, text)
          })
        )
      }
    })