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

Nicole Latifi · Accepted Answer · 2022-04-20 18:56:28Z

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

answered Apr 20, 2022 at 18:56

Nicole Latifi

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NMNamu Over a year ago

Thank you so much!

Collectives™ on Stack Overflow

How do I change Component Attribute on onClick in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related