How to access data within map function for onClick in react

Question

I was curious how one may be able to access data within a map function so that it can be used within the event parameter when passing down a function within an onClick function in React.

Here is my handleClick function. I would like to gain access to the "d" named property from the map function using the event in handleClick If there's another way to gain access to the variable "d" so that I could use it in handleClick that would be really great. I couldn't find a specific solution for this type of scenario so I was wondering if I could get some help. Thanks!

// Gain access to the parameter data from the map function  
public handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
    console.log(event);
  }

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={this.handleClick} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

Dupocas · Accepted Answer · 2019-08-19 17:49:53Z

3

Just pass it as an inline function

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={e => this.handleClick(e, d)} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

public handleClick(event: React.MouseEvent<HTMLAnchorElement>, d: any) {
    console.log(event, d);
}

answered Aug 19, 2019 at 17:49

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

3 Comments

Michael Gee Over a year ago

Is there a more efficient way of doing this? Aren't inline functions more inefficient. I get an error involving rendering performance in jsx

Dupocas Over a year ago

Not at all. You could encapsulate it in a regular function. But there will be no performance gain whatsoever

DiamondDrake Over a year ago

More efficient way would be to use bind this.handleClick.bind(this, d) The this part doesn't matter if it's already bound (or doesn't have to be), but it lets you choose what parameters will be sent when the function is called.

Collectives™ on Stack Overflow

How to access data within map function for onClick in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related