Mapping custom JSON to anchor JSX attribute

[mk53202]

I'm stuck trying to map customer JSON to the anchor. My JSON looks like this:

[{"event_id":"76341710-cfff-450c","event_time":"2021-10-22T16:58:19.624699","location":{"latitude":"44.044035667","longitude":"-88.954343833"}}]

The map function I'm using is:

    const PigeonMarkers = items.map((marker, index) => (
      <Marker
        key={index}
        anchor={[marker.location['latitude'] + ',' + marker.location['longitude']]}
        payload={marker.event_id}
        onClick={this.onMarkerClick}
      />

    ));

Not working, any idea how to do this? I'm super stumped how to fill in the anchor with the data I have.

[mk53202]

Also tried:

    const PigeonMarkers = items.map((marker, index) => (
      <Marker
        key={index}
        anchor={[marker.location['latitude'],marker.location['longitude']]}
        payload={marker.event_id}
        onClick={this.onMarkerClick}
      />

Just really stuck on why this won't work.

[mk53202]

I resolved this by using this snippet:

    const PigeonMarkers = items.map((marker, index) => (
      <Marker
        anchor={[JSON.parse(marker.location[`latitude`]), JSON.parse(marker.location['longitude'])]}
        payload={marker.event_id}
        onClick={this.onMarkerClick}
      />

Issue was with quotes coming down from the JSON. Is there any reason why quotes won't work with the prop in Marker. Is this just something I'm doing wrong or is this a JSX/Javascript thing?

[mariusandra]

Hey, the anchor expects an array with numbers, not strings of numbers surrounded by quote symbols :).