react-typescript-function-component.tsx

import React, { useState } from 'react';
import className from 'classnames';
import CSSModules from 'react-css-modules';
import styles from './Foo.module.scss';

export interface FooProps {
  className?: string;
  prefixCls?: string;
}

const defaultProps: FooProps = {
  className: '',
  prefixCls: 'lv-foo'
};

const Foo: React.FC<FooProps> = props => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  const classes = className(props.prefixCls, props.className, {});

  return (
    <div styleName={classes}>
      <p>count: {count}</p>
      <button onClick={handleClick}>Add</button>
    </div>
  );
};

Foo.defaultProps = defaultProps;

export default CSSModules(Foo, styles, {
  allowMultiple: true
});