How do I pass an element's property to a function in React?

Question

I'd like to pass a property of an element of mine when clicked to the onClick function that I have setup. I don't know how to access the property of the element though. To be specific, I'd like to pass the position property of my Google Map Marker to my onClick function so that I could store the position of the marker that was clicked into an array.

My Marker code looks like this:

<Marker position={{lat:"some value", lng:"some value"} 
onClick{()=>markerClick(what do I pass here?)} clickable={true}}

I'd like to pass either the position or, position's lat and lng property. If I try passing position,I get an error stating position not defined. Lat and lng just give me undefined values.

Note: position, clickable are native properties of the Marker element.

markerClick(e)} clickable={true}} e will be the element itself. — Lead Developer, Feb 04 '18 at 05:26
So how would I access the position property of the element in the onClick function then? e.position.lat? Because that gives me an error — Thunder54, Feb 04 '18 at 05:29
that is custom property of component. then please make the variable for the position. that's will be easier. save position into state. and then something like this. — Lead Developer, Feb 04 '18 at 05:31
The problem with that is, I'm updating the position of the marker through a loop with data from an API. I don't know how I would work around with having position as a state variable then. — Thunder54, Feb 04 '18 at 05:34
have you tried this: `onClick{()=>markerClick("lat value", "lng value")}`, same value that you assigned to lat and lng, whenever you click on marker, inside `markerClick` method, you will get lat and lng value of that marker. — Mayank Shukla, Feb 04 '18 at 05:36
I am displaying multiple Markers on the map and if I keep a state position variable then I wouldn't get the Marker that has been clicked upon's unique position. — Thunder54, Feb 04 '18 at 05:38
@MayankShukla yes that would work for a case in which I know those values. The value of lat and lng are being updated in a loop with data coming in from an API. So they are values from the API. Eg: position={{lat: data.businesses[i].coordinates.lat, lng : data.businesses[i].coordinate.lng}} — Thunder54, Feb 04 '18 at 05:41
@sufiyansadiq If data is coming from api and it is stored then you can always access them by index. Just pass index to the click handler: `onClick{()=>markerClick(index)}` and in `markClick` function, just use `data.businesses[index].coordinates.lat` to access them. — Prakash Sharma, Feb 04 '18 at 05:49
@Prakashsharma that does sound like a good solution. But the problem I'm facing for that solution is I can't access the data from the variable in my markerclick function. As I'm assigning the data to a variable in the render() part of my app. Accessing it with Marker component in the return() part. My markerClick function comes just after my constructor. So I'm getting an error. Any work around for this issue? — Thunder54, Feb 04 '18 at 05:58
@sufiyansadiq Then pass data too `onClick{()=>markerClick(data, index)}`. Or you can just pass lat and lang too like `onClick{()=>markerClick(data.businesses[i].coordinates.lat, data.businesses[i].coordinate.lng)}` — Prakash Sharma, Feb 04 '18 at 06:20

score 1 · Answer 1 · answered Feb 04 '18 at 06:16

I think in react, all data you should store in state, instead of passing data by parameter.For your case, create a position obj in state, then update in right situation(componentDidMount, componetWillMount and so on). And when click Marker, you can just change the state.position, then react will re-render UI.

score 1 · Answer 2 · answered Feb 04 '18 at 06:31

1

EDITED: you can try

<Marker
  position={lat:"some value", lng:"some value"} 
  onClick={ this.handler }
  clickable={ true }
/>

and in this.handler you can

this.handler = (event) => {
  event.target.getAttribute('position');
}

event.target give the natvie DOM element and just get the properties by native DOM https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

answered Feb 04 '18 at 06:31

Jianzhong Chen

11
2

Thanks. I like the idea behind this solution. But unfortunately I get an error stating : cannot read property getAttribute() of undefined. – Thunder54 Feb 04 '18 at 07:21

dashton · Answer 3 · 2018-02-04T09:29:26.643

You can just just add it to the callback function that you bind to the onClick. Like so (this is assuming the position is in state, but could be in props or hard-coded):

  render() {
    const { position } = this.state;
    return (
      <Marker position={position}
      onClick={() => this.handleClick(position)} />
    )
  }

EDIT: I've just read the comments. If you have an array of markers, you can assign the positions to the click handlers like this (assuming you set your positions in state when you receive them from your source):

  render() {

    const { positions } = this.state;
    const markers = positions.map((p, i) => 
      <Marker key={i} 
              position={p} 
              onClick={() => this.handleClick(p)} />);
    return (
      <div>
        {markers}
      </div>
    )
  }

How do I pass an element's property to a function in React?

3 Answers3