Использование this внутри map при преобразовании массива

class Tabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  activeIndex: 0  }
  }
 
  onLinkClick(event) {
     this.setState({ activeIndex: Number(event.currentTarget.getAttribute("data-index"))});
  }
 
  render() {
    let active_link = this.state.activeIndex;
    let on_click = this.onLinkClick.bind(this);
    let li_elements = this.props.tabs.map(function(tabs_element, index){
      let class_name = (active_link===index) ? "nav-link active" : "nav-link";
      return <li class="nav-item"><a className={class_name} data-index={index} onClick={on_click} href="#">{tabs_element}</a></li>});
    
    return <ul class="nav nav-tabs"> { li_elements } </ul>
  }
}

    let li_elements = this.props.tabs.map(function(tabs_element, index){
      let class_name = (this.state.activeIndex===index) ? "nav-link active" : "nav-link";
      return <li class="nav-item"><a className={class_name} data-index={index} onClick={this.onLinkClick.bind(this)} href="#">{tabs_element}</a></li>});

export default class Tabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 }
  }
  
  onLinkClick(index) {
    // Я бы сразу номер передавал бы. 
    this.setState({ activeIndex: index });
  }
  
  render() {
    // Контекст теряется внутри функции map. Можно стрелочные функции использовать и короче станет и работать будет
    return (<ul class="nav nav-tabs">
      {this.props.tabs.map((tab, index) => {
        let class_name = (this.state.activeIndex===index) ? "nav-link active" : "nav-link";
        return (
          <li class="nav-item">
            <div className={class_name} onClick={() => this.onLinkClick(index)}>{tab}</div>
          </li>)
      })} 
    </ul>);
  }
}