This is undefined in OnClick event on HTML generated outside of render()

[CodeWriterWriter]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When declaring an OnClick function in HTML written outside of the render() function, "this" is undefined.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Code is as follows:
constructor() {
super();
this.generateHTML = this.generateHTML.bind(this);
this.changeActiveSport = this.changeActiveSport.bind(this);
}
sports = [
{
name: 'Soccer',
active: true
}, etc ];

generateHTML() {
return this.sports.map(function (item, i) {
if (item.active) {
return {item.name}
} else {
return {item.name}
}
});
};
changeActiveSport = (e) => {
this.sports = this.sports.map(function (item, j) {
item.active = false;
});
if (this.sports[i]) {
this.sports[i].active = true;
}
this.sportsHtml = this.generateHTML();
};

sportsHtml = this.generateHTML();

render() {
    return (
        <Row id="sportsRow">
            <Col sm={8}>
                <Row>
                    {this.sportsHtml}
                </Row>
            </Col>  
        </Row>
    );
}

What is the expected behavior?

This shouldn't be undefined.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: ^16.0.0

[heyimalex]

Could you format your code? Just wrap with fences:

```
code goes here
```

Also your example doesn't have an onClick handler at all. Try making a minimal jsfiddle that shows the issue.

[aweary]

No follow up, assuming this issue was resolved. If not, please provide a full code sample that reproduces the issue using https://codesandbox.io/s/new