score:16

Accepted answer

by using function you sort of lose the context and this is not the one you were expecting.

in this case, either use arrow function as:

render() {
  createmenuitems = (items) => {
    console.log(this.state.menuselected)
    ...
  }
}

or, and here comes my suggestion, move createmenuitems outside of render method:

createmenuitems = (items) => {
  console.log(this.state.menuselected)
}

render() {
  return (
    <nav id='sidebar'>
      <ul classname='list-unstyled'>
        {menumenuoptions.menuitems.map((menuitem, index) =>
          this.createmenulistitem(menuitem)
        )}
      </ul>
    </nav>
  )
}

binding it in the constructor is also a possibility:

class yourcomponent extends react.component {
  constructor(props) {
    super(props)

    this.state = {
      menuselected: '',
    }

    this.createmenulistitem = this.createmenulistitem.bind(this)
  }

  createmenulistitem() {
    console.log(this.state.menuselected)
  }

  render() {
    return (
      <nav id='sidebar'>
        <ul classname='list-unstyled'>
          {menumenuoptions.menuitems.map((menuitem, index) =>
            this.createmenulistitem(menuitem)
          )}
        </ul>
      </nav>
    )
  }
}

Related Query

More Query from same tag