I want to pass callbacks through to a map component, and this requires being able to give any args I want. I try with
MapView.js:
import React, { Component } from 'react';
import { browserHistory } from 'react-router';
export default class MapView extends Component {
constructor(props){
super(props);
this.renderMap = this.renderMap.bind(this);
this.addMarkerToMap = this.addMarkerToMap.bind(this);
this.clickMarker = this.clickMarker.bind(this);
}
componentDidMount() {
this.renderMap();
}
renderMap() {
let map_data = {
zoom: this.props.zoom || 10,
center: this.props.center || {lat: 30.3, lng: -97.75} // default to Austin
};
let this_map = new google.maps.Map(this.refs.map, map_data);
let markers_data = this.props.markers_data || [];
markers_data.map(function(data) {
this.addMarkerToMap(data, this_map);
}.bind(this));
}
addMarkerToMap(data, the_map) {
let marker = new google.maps.Marker({
position: data.coordinates,
map: the_map
});
if (data.callback) {
let params = data.params || [];
marker.addListener('click', data.callback.bind(this, ...params));
}
return marker
}
clickMarker(item_id, pathname) {
// http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router
browserHistory.push(
{
pathname: pathname,
query: { item_id: item_id } // https://stackoverflow.com/questions/36350644/how-can-i-pass-parameters-on-redirection-using-react-router
}
);
}
render() {
return (
<div>
<h3>{this.props.title}</h3>
<p>{this.props.description}</p>
<div style={ {height: 500, width: 500 } } ref="map" />
</div>
)
}
}
MapShowCustomers.js:
import React, {Component} from "react";
import { browserHistory } from 'react-router';
import MapView from './MapView';
export default class MapShowCustomers extends Component {
constructor(props){
super(props);
this.clickMarker2 = this.clickMarker2.bind(this);
this.exampleCallback = this.exampleCallback.bind(this);
}
clickMarker2(pathname, item_id) {
alert(pathname);
// http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router
browserHistory.push(
{
pathname: pathname,
query: { item_id: item_id } // https://stackoverflow.com/questions/36350644/how-can-i-pass-parameters-on-redirection-using-react-router
}
);
}
exampleCallback(text) {
console.log(text)
if (text) {
alert(text);
} else {
alert("it worked anyway");
}
}
render() {
let titleText = "This one to show customers for restaurant employees...more of a map example";
let description = "Notice the usage of the 'center' prop...by overwriting the default center, this one shows up in Illinois (center={ {lat: 40.3, lng: -88.75} } )"
let coordinates = {lat: 40.3, lng: -88.75};
let markersData = [
// {callback: this.clickMarker2, args: ['/profile-customer', 2], coordinates: {lat: 40.25, lng: -88.65}},
// {callback: this.clickMarker2, args: ['/profile-customer', 7], coordinates: {lat: 40.35, lng: -88.85}},
// {callback: this.clickMarker2, args: ['/profile-customer', 6], coordinates: {lat: 40.37, lng: -88.78}}
{callback: this.exampleCallback, params: ["blah"], pathname: '/profile-customer', item_id: 1, coordinates: {lat: 40.25, lng: -88.65}},
{callback: this.exampleCallback, params: ["blah"], pathname: '/profile-customer', item_id: 13, coordinates: {lat: 40.35, lng: -88.85}},
{callback: this.exampleCallback, pathname: '/profile-customer', item_id: 37, coordinates: {lat: 40.37, lng: -88.78}}
];
{/* look at the center prop for how to pass props...in GoogleMap component it defaults to Austin */}
return (
<div>
<MapView markers_data={markersData} center={coordinates} title={titleText} description={description}/>
</div>
);
}
}
I try pass {callback: this.exampleCallback, pathname: '/profile-customer', item_id: 37, coordinates: {lat: 40.37, lng: -88.78}} through without params and see exampleCallback alert "it worked anyway" by doing
if (data.callback) {
let params = data.params || [];
marker.addListener('click', data.callback.bind(this, ...params));
}
but now I see this:
and it wants to alert [object Object] instead of "it worked anyway". This code can be seen at this repo (to try it, use npm i; npm start).
