The function you pass to .map also has its own this binding. The simplest solution is to pass this as second argument to .map:
const navbarItems = this.state.navbarData.map(function(item) {
...
}, this);
this inside the function will be set to whatever you pass as second argument, which in this case is the component instance.
Alternatively you can use an arrow function instead of a function expression, since this is resolved lexically (i.e. like any other variabe) inside arrow functions:
const navbarItems = this.state.navbarData.map(
item => <NavbarItem navigationWhenClicked={this.navClick} key={item.id} text={item.text} id={item.id} />
});
See also: How to access the correct `this` inside a callback?
