Im making a google map with a report button and I cant figure out how to make the page redirect to another page when the button with class "report-btn" is clicked? I tried to used but it didnt work and Im not sure how to go about implementing this.
export class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true,
});
onClose = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null,
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: 40.75901,
lng: -73.984474,
}}
>
<Marker onClick={this.onMarkerClick} name={"S Train - 42 Street"} />
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
<button className="report-btn">Report</button>
</div>
</InfoWindow>
</Map>
);
}
}
You have 2 solutions, use react-router-dom or window.location.href/replace
import { Link, NavLink } from 'react-router-dom';
you should use
import { Link} from 'react-router-dom';
return (
<Link to={"/somewhereyoulike}>
<Button>
somthiong
</Button>
</Link>
)