React · Theory

Buttons in React

Theory

59/94

Buttons in React

A button is still HTML. In React: type="button" inside forms so it doesn’t submit, onClick={handler}, disabled={busy}, label from state (Save / Saving…). Extract <Button> when the same styles repeat. That’s it — don’t over-abstract a native control on day one.

Buttons in React — on screen — Save. busy true → Saving… and disabled. type=button so it doesn’t submit a parent form.

Exam tip

type, onClick, disabled.

Example

// Button
export default function Save({ busy }) {
  return (
    <button type="button" disabled={busy} onClick={() => console.log("save")}>
      {busy ? "Saving…" : "Save"}
    </button>
  );
}

Buttons in React — on screen: Save. busy true → Saving… and disabled. type=button so it doesn’t submit a parent form.

Short notes

type=button in forms.
onClick + disabled from state.
Trapdefault submit type.

React · Theory

Buttons in React

← All stacks

Theory

59/94

Buttons in React

Buttons in React — on screen — Save. busy true → Saving… and disabled. type=button so it doesn’t submit a parent form.

Exam tip

type, onClick, disabled.

Example

// Button
export default function Save({ busy }) {
  return (
    <button type="button" disabled={busy} onClick={() => console.log("save")}>
      {busy ? "Saving…" : "Save"}
    </button>
  );
}

Buttons in React — on screen: Save. busy true → Saving… and disabled. type=button so it doesn’t submit a parent form.

Short notes

type=button in forms.
onClick + disabled from state.
Trapdefault submit type.

Buttons in React

Example

Short notes

Questions

Buttons in React

Example

Short notes

Questions