cannot triger click event in react component

[johnnylc]

class ReactComponent extends Component { render() { const markerStyle = { backgroundColor: "blue", color: "white", display: "flex", justifyContent: "center", width: "50px", height: "50px", borderRadius: "50px", alignItems: "center" }; return <div onClick={() => alert('rc click')} style={markerStyle}>Marker

[makhataibar]

Maybe u should insert ReactComponent to icon props? Like:

class ReactComponent extends Component {
render() {
const markerStyle = {
backgroundColor: "blue",
color: "white",
display: "flex",
justifyContent: "center",
width: "50px",
height: "50px",
borderRadius: "50px",
alignItems: "center"
};
return <div onClick={() => alert('rc click')} style={markerStyle}>Marker;
}
}

<Marker icon={ <ReactComponent /> } position={this.state.center} />

[ishaan6395]

@johnnylc, @makhataibar has suggested the right way to use it.

[jaballogian]

Maybe u should insert ReactComponent to icon props? Like:

class ReactComponent extends Component {
render() {
const markerStyle = {
backgroundColor: "blue",
color: "white",
display: "flex",
justifyContent: "center",
width: "50px",
height: "50px",
borderRadius: "50px",
alignItems: "center"
};
return <div onClick={() => alert('rc click')} style={markerStyle}>Marker;
}
}

<Marker icon={ <ReactComponent /> } position={this.state.center} />

I tried this way but didn't work.

But we could use eventHandlers prop from the react-leaflet documentation here https://react-leaflet.js.org/docs/api-components/. It worked for me.

<Marker
  position={[50.5, 30.5]}
  eventHandlers={{
    click: () => {
      console.log('marker clicked')
    },
  }}
/>

[adamscybot]

I posted a way to do this over on this SO answer and have published it as a lib on https://github.com/adamscybot/react-leaflet-component-marker