react_typescript_component_props_state_and_events_quickstart.ts

1import { useState } from 'react';
2
3interface MyButtonProps {
4  /** The text to display inside the button */
5  title: string;
6  /** Whether the button can be interacted with */
7  disabled: boolean;
8}
9
10function MyButton({ title, disabled }: MyButtonProps) {
11  return (
12    <button disabled={disabled}>{title}</button>
13  );
14}
15
16export default function MyApp() {
17  const [count, setCount] = useState<number>(0);
18
19  function handleClick() {
20    setCount(count + 1);
21  }
22
23  return (
24    <div>
25      <h1>Welcome to my app</h1>
26      <MyButton title={`Clicked ${count} times`} disabled={false} />
27      <br />
28      <button onClick={handleClick}>Increase Count</button>
29    </div>
30  );
31}