Reusable Components

When designing components, you should aim to make them “pure” and generic.

A Button component shouldn’t know why it’s being clicked. It should just accept a label and a function to run when clicked.

function Button({ label, color }) {
  return (
    <button className={`bg-${color}-500 px-4 py-2 text-white`}>
      {label}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button label="Save" color="blue" />
      <Button label="Delete" color="red" />
    </div>
  );
}