React/ ESLint - JSX props should not use arrow functions

Question

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?

no-bind is part of the es lint config i inherited. I believe its best practice? — red house 87
– red house 87, Commented Aug 2, 2018 at 11:30

Yusinto Ngadiman · Accepted Answer · 2018-08-02 11:17:26Z

2

You can refactor button into its own component:

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

answered Aug 2, 2018 at 11:17

Yusinto Ngadiman

1761 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

red house 87 Over a year ago

Seems like the only logical option! Thanks for the other points, was just trying to post minimal code :)

Thakur Mahendar Singh · Accepted Answer · 2018-08-02 10:50:58Z

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.

Collectives™ on Stack Overflow

React/ ESLint - JSX props should not use arrow functions

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related