Tabular menu items do not display special characters

[achimkoellner]

import React from 'react';
import { Menu } from 'semantic-ui-react';

class MyMenu extends React.Component {
    render () { 
        return (
            <Menu tabular attached="top">
                <Menu.Item name="Übersicht" active/>
                <Menu.Item name="Würstchen" />
                <Menu.Item name="Lärchen" />
            </Menu>
        );
    }
})

export default MyMenu

The code above will render Tabs labeled with "Ubersicht", "Wurstchen" and "Larchen".

[levithomason]

Pasting this code into the docs produces:

Fixing that error produces:

[achimkoellner]

Hi levithomason, but look it does not display the special characters in this example. It displays Ubersicht instead of Übersicht

[levithomason]

Ah, I see. Yes, this is because if no content is provided for the menu item, the name is Start Cased and used for the content: _.startCase(name). That process appears to deburr the characters.

To keep them, you should explicitly set the content to the special characters you want to see:

The name prop is the "Internal name of the MenuItem". It is the programmatic name used in the onItemClick, you can see the name usage with the callback in the 4th Menu example in the docs:

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleNameProp extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu>
        <Menu.Item
          name='editorials'
          active={activeItem === 'Editorials'}
          onClick={this.handleItemClick}
        />
        <Menu.Item
          name='reviews'
          active={activeItem === 'Reviews'}
          onClick={this.handleItemClick}
        />
        <Menu.Item
          name='upcomingEvents'
          active={activeItem === 'upcomingEvents'}
          onClick={this.handleItemClick}
        />
      </Menu>
    )
  }
}

Notice also how these names are camelCased, but the menu displays them Start Cased in the rendered items.

[levithomason]

BTW, this is confusing for sure. I'm open to redesign here. Less magic and more explicit would be good. I'm not sure we even need a name prop at all in this workflow. I don't have time for it, but I would support an effor to clean this up, making it more simple, more explicit, and not transforming values like this.

[achimkoellner]

However Levi, it works thanks a ton!

[jarben]

Just burned a few hours before finding this issue. Would be great if name works with utf-8!

[levithomason]

PRs welcome! See the CONTRIBUTING.md setup and more info.

[Cicko]

How Can I set the content of each tab? There are no examples of it.

[levithomason]

Usage questions are best answered on gitter, see link in the README badges. That said, I'm not exactly sure what you are asking.