I'm currently creating a ponent 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 ponents 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?

I'm currently creating a ponent 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 ponents 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?

• javascript
• reactjs
• eslint

• take a look at stackoverflow./a/41053846/2823226 – Alireza Commented Aug 2, 2018 at 10:51
• If I may, why do you use the rule no-bind? – ChrisR Commented Aug 2, 2018 at 10:51
• no-bind is part of the es lint config i inherited. I believe its best practice? – red house 87 Commented Aug 2, 2018 at 11:30

2 Answers 2

You can refactor button into its own ponent:

class MyButton extends Component {
  static propTypes = {
    language: PropTypes.string.isRequired,
  };

  onClick = () => console.log(this.props.language);

  render() {
    const {language} = this.props;
    return (
      <button onClick={this.onClick} type="submit">
        {language}
      </button>);
  }
}

and then in your LanguageDropDown class, use MyButton like this:

class LanguageDropdown extends Component {
  ...

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <MyButton key={lang} language={lang}/>)}
      </div>
    )
  }

  ...
}

A couple of additional things:

• You have a typo onCLick should be onClick
• You need a key for repeated items

try the below code. here I tried by taking the value into the state, same can be tried using props. class LanguageDropdown extends Component { constructor(props) { super(props); this.state = {languages:['telugu','hindi','english']}; // this.changeLanguage = this.changeLanguage.bind(this); }

  changeLanguage(event,lang){
    //event.preventDefault();
    console.log('change lang: '+JSON.stringify(lang));
  };

  render() {
    return (
      <div>
        {this.state.languages.map(lang => <button onClick={(event)=>this.changeLanguage(event,lang)}>{lang}</button>)}
      </div>
    )
  }
}


render(<LanguageDropdown />, document.getElementById('root'));

when you bind the handler in the onClick event where you are passing the value to the handler, then we have to pass that value from the event and collect it to get that value.