Calling a Function outside the render part - reactjs

Question

I'm a fresh starter in React and Apollo (GraphQL). I need to display a Layer when a user clicks on a google maps marker. My Apollo Request is displaying correctly the markers depending on found missions in the database, the only problem I'm facing is that the onClick is returning a TypeError: _this.handleMissionClick is not a function. I think this is because the function is outside the render part and the main class, and can't find a way to link the two parts.
Here is the complete page code :
// #flow
import React from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import { connect } from 'react-redux'
import Layer from 'grommet/components/Layer'
import MissionDetails from './../missions/details'
type TMission = {
id : string,
description: string,
status: string,
title: string,
location: number[]
}
type TMissionProps = {
data: {
loading: boolean,
searchMissions?: Array<TMission>
}
}
function setIcon (status) {
switch(status) {
case 'accepted':
return 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
case 'created':
return 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
default:
return null;
}
}
const _MissionList = (props: TMissionProps) => {
if (!props.data.searchMissions) return null
return (
props.data.searchMissions &&
props.data.searchMissions.map( mission => (
<Marker
position={{ lng: mission.location[0], lat: mission.location[1]}}
key={ mission.id }
title={ mission.title }
icon={setIcon(mission.status)}
onClick={() => this.handleMissionClick(mission.id)}
>
</Marker>
))
)
}
const MissionList = connect(
({ session }) => ({ t: 1 })
)(graphql(gql`
query mapMissions(
$authToken: String!
) {
searchMissions(
input: {
location: [2, 3]
}
) {
id
title
status
}
}
`, {
options: {
fetchPolicy: 'network-only'
}
})(_MissionList))
const GoogleMapWrapper = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={11}
defaultCenter={{ lat: 48.8588377, lng: 2.2770201 }}
center={props.center}
>
<MissionList/>
</GoogleMap>))
export default class DashboardPage extends React.Component {
constructor () {
super();
this.state = {
localised: {
lat: 48.8588377,
lng: 2.2770201,
selectedMissionId: null,
showMissionDetailsLayer: false
}
};
}
toggleMissionDetailsLayer = () => {
this.setState({
showMissionDetailsLayer: !this.state.showMissionDetailsLayer
})
}
componentDidMount () {
this.getLocation();
}
handleMissionClick = (missionId: string) => {
this.setState({
selectedMissionId: missionId
})
this.toggleMissionDetailsLayer()
}
getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
this.setState({
localised: {
lat: position.coords.latitude,
lng: position.coords.longitude
}}
)
})
}
}
render () {
return (
<div>
<div style={{ height: '20vh', width: '100%' }}>
</div>
<GoogleMapWrapper isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?key=$$$&?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `80vh` }} />}
center={{ lat : this.state.localised.lat, lng : this.state.localised.lng }}
/>
{
this.state.showMissionDetailsLayer &&
<Layer align='right' closer={true} overlayClose={true} onClose={this.toggleMissionDetailsLayer}>
<MissionDetails mission={_(this.props.data.allMissions).find({id: this.state.selectedMissionId})} />
</Layer>
}
</div>
)
}
}

Answer 1

Since your handleMissionClick is defined in DashboardPage. Which is one of the parents of MissionList you need to pass the callback handler through the props. That way MissionList has a prop to handle the onClick
In your DashboardPage you should pass an onClickHandler
<GoogleMapWrapper
isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?key=$$$&?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `80vh` }} />}
center={{ lat : this.state.localised.lat, lng : this.state.localised.lng }}
handleMissionClick={this.handleMissionClick} // Add callback prop here
/>
Inside your GoogleMapWrapper pass the handleMissionClick prop to MissionList
const GoogleMapWrapper = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={11}
defaultCenter={{ lat: 48.8588377, lng: 2.2770201 }}
center={props.center}
>
<MissionList handleMissionClick={props.handleMissionClick} />
</GoogleMap>))
In your MissionProps you now have onClick as a prop
type TMissionProps = {
data: {
loading: boolean,
searchMissions?: Array<TMission>
},
onClick: string => void
}
Update your Marker to use the callback prop
<Marker
position={{ lng: mission.location[0], lat: mission.location[1]}}
key={ mission.id }
title={ mission.title }
icon={setIcon(mission.status)}
onClick={() => props.handleMissionClick(mission.id)} // Notice this is now props.handleMissionClick instead of this.handleMissionClick
>
</Marker>