[React] Write a stateful Component with the React useState Hook and TypeScript

Here we refactor a React TypeScript class component to a function component with a useState hook and discuss how props and state types can be modeled accordingly.

 

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

type ButtonProps = {
  label?: string;
  children: React.ReactNode;
};
type ButtonState = {
  isOn: boolean;
};
function Button (props: ButtonProps) {

  const [state, setState] = React.useState<ButtonState>({
    isOn: false
  });

  const toggle = () => setState({ isOn: !state.isOn });

  const { children } = props;
  const { isOn } = state;
  const style = {
    backgroundColor: isOn ? "red" : "green"
  };
  return (
      <button style={style} onClick={toggle}>
        {children(isOn)}
      </button>
    );
}

Button.defaultProps = {
  label: "Hello World!"
};

function App() {
  return (
    <Button>
      {isOn => (isOn ? <div> Turn off</div> : <div> Turn on</div>)}
    </Button>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);