React: json index undefined passed with array iterator through onclick button

Question

so for this component, it just shows a list of cards with some information passed through the props which is a JSON array set into events state. So, since it's a variable number of results each time I created an array of the number of times I want to the component to be rendered which works fine. Each card has its relevant information passed through

this.state.events[i]

Ok all that works fine EXCEPT one spot, which is the FlatButton onClick action.

<FlatButton label="Download ICS" onClick={() => console.log(this.state.events[i].location)} />

If I try access the state with i, then I will get a

TypeError: Cannot read property 'location' of undefined

or whatever property of the JSON I choose. BUT, if i use an actual manual index like 5, 4, 3, etc then it works just fine. Thing is, I need it to be different for each button, otherwise other event cards have a button that does the wrong thing for that event. Keep in mind again that for all the other times I use i to access the JSON array, it works fine above such as in the CardText component.

Here is a visual:

I don't know, it might have something to do with component life cycle, but I don't know enough to know precisely.

Thanks

class SearchResultsList extends Component {
  constructor(props) {
    super(props);

  this.state = {
    events: [],
    eventsLength: 0,
   };
 }

 componentDidMount() {
     var count = Object.keys(this.props.events).length;
     this.setState({ events: this.props.events });
     this.setState({ eventsLength: count });
 };

 render() {
    var cardSearchHolder = [];
    for(var i = 0; i < this.state.eventsLength; i++) {
        cardSearchHolder.push(
            (
            <div key={i}>
            <Card>
               key={this.state.events[i]._id}
                <CardHeader
                  title={this.state.events[i].event_name}
                  subtitle={this.convertDateTime(this.state.events[i].start_date, this.state.events[i].end_date)}
                  actAsExpander={true}
                  showExpandableButton={true}
                />
                <CardText expandable={true}>
                  <div>
                    Category: {this.state.events[i].event_category}
                  </div>
                  <div>
                    Where: {this.state.events[i].location}
                  </div>
                  <div id="miniSpace"></div>
                  <div>
                    Description: {this.state.events[i].event_description}
                  </div>
                </CardText>
                <CardActions>
                  <FlatButton label="Download ICS" onClick={() => console.log(this.state.events[i].location)} />
                </CardActions>
              </Card>
              <div id="space"></div>
          </div>)
       );
    }
    return(
      <div>
         <MuiThemeProvider>
            <Card>
               {cardSearchHolder}
            </Card>
          </MuiThemeProvider>
          <div id="miniSpace"></div>
       </div>
    );
 }

}