I'm currently creating a component in react and i'm using the ES Lint rule `react/jsx-no-bind`. My issue here is that I want to be able to pass a parameter to my components function. Here is the code I would like to use to be able to do so:

```
class LanguageDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  changeLanguage = (lang) => {
    console.log(lang)
  };

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <button onCLick={() => this.changeLanguage(lang)}>{lang}</button>)}
      </div>
    )
  }

...

```

This pulls up the ESlint error:

> 
> JSX props should not use arrow functions
> 
> 
> 

I'm not entirely sure how to achieve this without using an arrow function or using `.bind()`. I could add a data-attribute to the button element and then just pass in the event into the `changeLanguage` function and fetch the attribute using event.target() but this doesn't feel like it's the way it should be approached in React. 

Can someone tell me what would be the correct way?