I want to change the lat and lng props on onClick but can't seem to find a way to target them, how do I do this?
const randomLocation = () => {
// Here is where I want to target {lat} and {lng}
Map.lat = 12.12312; //Example of what I mean
};
const App = () => {
return (
<div className="App">
<header className="App-header">
<Map lat={56.048095} lng={12.702583} />
<div className="m-auto">
<button
onClick={randomLocation} // this is the onClick event
className="inline-flex fixed bottom-16 left-[10rem] items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#2EC1EF] hover:bg-indigo-700 transition-all"
>
Teleport Me Somewhere Random
</button>
<button className="inline-flex fixed bottom-16 right-[10rem] items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#9A2EEF] hover:bg-indigo-700 transition-all">
Take Me Home
</button>
</div>
</header>
</div>
);
};
I think you'll want to create a variable for the lat and lng that's saved in state. Then onClick, you can set state.
const App = () => {
state = { mapLat: 56.048095 }
const randomLocation = () => {
this.setState({ mapLat: 12.12312 })
};
return (
<>
<Map lat={mapLat} lng={12.702583} />
<button
onClick={randomLocation} // this is the onClick event
>
Teleport Me Somewhere Random
</button>
</>
);
};
With useState hook:
const App = () => {
const [mapLat, setMapLat] = React.useState(56.048095);
const randomLocation = () => {
setMapLat(12.12312)
};
return (
<>
<Map lat={mapLat} lng={12.702583} />
<button
onClick={randomLocation} // this is the onClick event
>
Teleport Me Somewhere Random
</button>
</>
);
};