React.js click event inside map function

Question

I'm trying to add a click event inside a map function which is looping through an arraylist. For some reason the onClick is causing the following TypeError.

Cannot read property 'handleClick' of undefined

Thanks for your help!

var subcategories = {
title: ['item1', 'item2', 'item3', 'item4']
};

  handleClick(e, subCategoryTitle) {
e.preventDefault();
  this.setState({selected: subCategoryTitle});
}

renderSubCategory(){
  var data = [];

  for (var x = 0; x <= subcategories.title.length - 1; x++) {
    data.push(x)
  }

  var rowMap = data.map(function(index) {
    return(
      <BC.ListItem spacing="mini">
        <BC.Text onClick={this.handleClick.bind(this, subcategories.title[index])} textBold={this.state.selected === subcategories.title[index] ? true : false}>{subcategories.title[index]}</BC.Text>
      </BC.ListItem>
      )
  })
  return rowMap;

}