State and events

Remember values with useState and respond to clicks.

State is data that a component remembers. Changing it through its setter makes React draw the component again.

React (JSX)

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </button>
  );
}

Never change state directly. Make a new value instead, so that React can see the change.

React (JSX)

setSkills([...skills, "React"]);                 // add
setSkills(skills.filter((s) => s !== "CSS"));    // remove
setUser({ ...user, city: "Erode" });             // update one field

← Props and lists Forms →