How do I change Component Attribute on onClick in React?

Question

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>
  );
};

Answer 1

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>
    </>
  );
};