Refactor arrow function from jsx prop

Question

I have this piece of code that works, but I am getting a linter error that says arrow functions should not be used inside jsx props. I have researched and now understand why, but I am having trouble refactoring it to make it work. What would be the best way to go about this?

const renderButtons = (data, onChange) => {
  const id = data.get('id');

  const buttons = (
    <View style={ styles.buttons }>
      <Button onPress={ () => onChange(this, { name: id, value: 'alpha' }) } title='A' />
      <Button onPress={ () => onChange(this, { name: id, value: 'beta' }) } title='B' />
    </View>
  );

  return buttons;
};

https://stackoverflow.com/questions/36677733/why-shouldnt-jsx-props-use-arrow-functions-or-bind — varoons, Dec 21 '18 at 00:23

score 0 · Accepted Answer · answered Dec 21 '18 at 00:23

Something like this should be fine.

const renderButtons = (data, onChange) => {
  const handlePress = (ele, obj) => onChange(ele, obj);
  const id = data.get('id');

  return (
    <View style={styles.buttons}>
      <Button onPress={handlePress(this, { name: id, value: 'alpha' })} title='A' />
      <Button onPress={handlePress(this, { name: id, value: 'beta' })} title='B' />
    </View>
  );
};

Refactor arrow function from jsx prop

1 Answers1