Question: I have an array of strings like so:

```
public ModeValue mode = new ModeValue("test_mode", "dog", new String[] {
        "cat", "dog", "rabbit", "horse", "bear", "fish", "bird", "snake"
}, this);

```

I would like to know how to treat each string as an integer. For example: cat = 1, dog = 2, rabbit = 3, etc. And then I would like to access each string by using that integer. This will be used in a list of string that can be clicked upon to have the modes switched.

Answer: 
You need to **bind** this:

```
var listTemp = data.map(function(item,index) {
  return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }.bind(this))

```

or pass **this** into the map function:

```
var listTemp = data.map(function(item,index) {
  return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }, this)

```

as others have noted, you might want to wrap the the changeSong function in an arrow function so that it isn't executed immediately on render:

```
<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}>

```
You should bind context for `this` using `.bind(...)` or by supplying the context argument to `.map(...)`. Also make sure you supply a proper function as your event handler. In particular, wrap your handler in an arrow function to properly pass `index` upon event dispatch,

```
<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}>

```