react - onclick using event without using arrow function

Question

I have a link to return home and within that there is a button to remove an item from an array. To prevent the link to redirect to the home screen and to just remove the item from the array I am need to use ev.preventDefault().

Is it possible to pass an ev to a react method without using an arrow function in the render method? From my research and specifically the answer here it appears that the following is the only way to do so.

I am concerned that the arrow function causes a re-render every time, since new function is created on each render.

removeItem(label, e) {
    e.preventDefault();
    this.props.removeItem(label.id);
}


render () {
    const { label } = this.props;
    return (
      <Link to'/'>
        <span>Go Home</span>
        <span onClick={(e) => this.removeItem(label, e) }> Click me <span>
      </Link>
    );
}

You could just remove the label parameter and get label from this.propsdirectly. Then you could just have onClick={this.removeItem} — Luka Jacobowitz
– Luka Jacobowitz, Commented Feb 10, 2017 at 15:40
Although, creating a new function on every render, probably isn't all that expensive :) — Luka Jacobowitz
– Luka Jacobowitz, Commented Feb 10, 2017 at 15:41
good spot, but will I be able to still use e.preventDefault? — peter flanagan
– peter flanagan, Commented Feb 10, 2017 at 15:41
Yeah you will :) Does this answer your question? I can make a full answer out of it. — Luka Jacobowitz
– Luka Jacobowitz, Commented Feb 10, 2017 at 15:43

Luka Jacobowitz · Accepted Answer · 2017-02-10 16:07:11Z

4

You could just remove the label parameter and get label from this.props directly. Refactor your app like this:

removeItem(ev) {
    ev.preventDefault();
    this.props.removeItem(this.props.label.id);
}


render () {
    const { label } = this.props;
    return (
      <Link to'/'>
        <span>Go Home</span>
        <span onClick={this.removeItem}> Click me <span>
      </Link>
    );
}

This way, React will automatically pass the click event to your removeItem method.

Although, it should be said, that creating a new function on every render, probably isn't all that expensive.

answered Feb 10, 2017 at 16:07

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:29:51Z

In the light of avoiding to re-create the function you could extract the parameters into the class props. Here are some examples

For example this will create a new function all the time.

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
            ...
          </li>
        )}
      </ul>
    );
  }
});

Now it will not re-create the functions on re-rendering.

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    return (
      <li onClick={this._onClick}>
        ...
      </li>
    );
  },
  _onClick() {
    this.props.onItemClick(this.props.item.id);
  }
});

Here is some SO explanation React js onClick can't pass value to method

Collectives™ on Stack Overflow

react - onclick using event without using arrow function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related