Create a Button in React that Changes Local State and Automatically Updates the UI

InstructorChris Achard

Share this video with your friends

Send Tweet

After creating some state with useState, we can call the set function to update the data in local state, which will automatically "re-render" the component, and update the UI.

To do that, we'll first create a new function that will update the state that we want:

const updateCount = () => {
  setCount(count + 1)
}

and then we can pass that updateCount function into the onClick of a button:

<button onClick={updateCount}>Click Me!</button>

which will then call updateCount once clicked, which will call setCount, which will update the count state, and automatically display that update on the UI.