How to use the preact.Component function in preact

import PropTypes from 'prop-types';
import preact from 'preact';

// State enum
const STATE_INITIAL = 'Initial';
const STATE_VOTED = 'Voted';

class MainWidget extends preact.Component {
    constructor(props) {
        super(props);
        this.state = {
            'state': STATE_INITIAL
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onInitialVote = this.onInitialVote.bind(this);
        this.onToggle = this.onToggle.bind(this);
    }

    onSubmit() {
        this.props.onSubmit(this.state.state);
        this.setState({'state': STATE_VOTED});
    }

/** @jsx React.h */
import React from 'preact'
import PropTypes from 'proptypes'
// import radium from 'radium'
import { base, highlight, secondary } from '../styles'

/**

	A simple wrapper around a editable text field. It pretty much does what you'd
	expect it to.

*/

class TextInput extends React.Component {

  render () {
    const { value, label, onChange, style, pattern, onSubmit } = this.props
		const conditionOnChange = value => pattern.test(value) ? onChange(value) : null
		const conditionOnSubmit = value => pattern.test(value) ? onSubmit(value) : null

    return <div style="{{">
       <label>{label}</label>
       <input maxlength="6" style="{{" value="{value}" type="text"> conditionOnChange(evt.target.value)}
         onChange={evt =&gt; conditionOnSubmit(evt.target.value)} /&gt;
     </div>
  }
}

// TextInput = radium( TextInput )

this.state.response_type
        );
    };

    static get defaultProps() {
        return {};
    }
}

// If we need to add more placeholders in the future, their names also need to be added to the Webpack MinifyPlugin's
// mangle exclude list.
export class ActionButtonPlaceholder extends preact.Component {}
export class NewRequestButtonPlaceholder extends preact.Component {}
export class CompanySelectorPlaceholder extends preact.Component {}
export class RequestFormPlaceholder extends preact.Component {}
export class DynamicInputContainerPlaceholder extends preact.Component {}
export class SignatureInputPlaceholder extends preact.Component {}
export class RequestTypeChooserPlaceholder extends preact.Component {}
export class RecipientInputPlaceholder extends preact.Component {}
export class TransportMediumChooserPlaceholder extends preact.Component {}

test('innerRef not passed', t => {
  t.plan(3);

  class InnerComponent extends Preact.Component {
    render() {
      t.equal(this.props.className, 'a', 'classname passed in');
      t.equal(this.props.foo, 'bar', 'props passed through');
      return Preact.h('button', null, 'InnerComponent');
    }
  }

  const Widget = styled(InnerComponent, {color: 'red'});
  const styletron = new Styletron();

  class TestComponent extends Preact.Component {
    componentDidMount() {
      t.ok(
        isCompositeComponentWithType(this.widgetInner, InnerComponent),
        'is InnerComponent'
      );

export function connect(Child) {
  function Wrapper(props, { store }) {
    const update = () => this.setState(EMPTY_OBJECT);
    this.componentDidMount = () => {
      this.unsubscribe = store.onPatch(update);
    };
    this.componentWillUnmount = () => {
      this.unsubscribe();
    };
    this.render = props => h(Child, assign({ store }, props));
  }

  return ((Wrapper.prototype = new Component()).constructor = Wrapper);
}

import Preact from 'preact'

export class Provider extends Preact.Component {
  getChildContext() {
    return {
      atom: this.props.atom
    }
  }

  render() {
    return this.props.children[0]
  }
}

return this.setState(null);
				}
				for (let i in state) if (!(i in mapped)) {
					state = mapped;
					return this.setState(null);
				}
			};
			this.componentDidMount = () => {
				store.subscribe(update);
			};
			this.componentWillUnmount = () => {
				store.unsubscribe(update);
			};
			this.render = props => h(Child, assign(assign(assign({}, boundActions), props), state));
		}
		return (Wrapper.prototype = new Component()).constructor = Wrapper;
	};
}

import preact from 'preact';
import $ from 'cash-dom';
import Classes from '../../../helpers/StateClasses';
import PrayerTimes from '../../../services/PrayerTimes';
import Functions from '../../../helpers/Functions';
import './style.scss';

export default class Home extends preact.Component {
    constructor(props) {
        super();
        const timeFormat = Functions.storageGet('timeFormat') || '24hour';
        const theme = Functions.storageGet('theme') || props.options.theme;
        this.pt = null;
        this.date = new Date();
        this.state = {
            screen: 'home',
            menuOpen: false,
            times: [],
            time: this.getCurrentTime(timeFormat),
            date: this.getCurrentDate(),
            settings: {
                timeFormat: {
                    label: 'Time Format',
                    value: timeFormat,

import t from 'Utility/i18n';
import { fetchCompanyDataBySlug } from 'Utility/companies';
import localforage from 'localforage';
import Privacy, {PRIVACY_ACTIONS} from "./Utility/Privacy";
import Modal from "./Components/Modal";
import {ErrorException, isDebugMode, rethrow} from "./Utility/errors";
import CompanyWidget from "./Components/CompanyWidget";
import IdData, {deepCopyObject, ID_DATA_CHANGE_EVENT, ID_DATA_CLEAR_EVENT} from "./Utility/IdData";
import {SavedCompanies} from "./Components/Wizard";
import {t_r} from "./Utility/i18n";

const request_articles = {'access': 15, 'erasure': 17, 'rectification': 16};

const HIDE_IN_WIZARD_MODE = [ '.search', '.request-type-chooser', '#data-portability', '#advanced-information', '.company-remove' ];

class Generator extends preact.Component {
    constructor(props) {
        super(props);

        this.state = {
            request_data: this.freshRequestData(),
            template_text: '',
            suggestion: null,
            download_active: false,
            blob_url: '',
            download_filename: '',
            batch: [],
            modal_showing: '',
            response_type: '',
            fill_fields: [],
            fill_signature: null,
            response_request: {},

import {AnonymousCredential, Stitch} from 'mongodb-stitch-browser-sdk';
import PropTypes from 'prop-types';
import SuggestionCardList from './SuggestionCardList';
import preact from 'preact';
import {reportAnalytics} from '../../js/util';

function getPageName() {
    const bodyElements = document.getElementsByClassName('body');
    if (!bodyElements.length) { return null; }

    const pagename = bodyElements[0].getAttribute('data-pagename');

    return pagename;
}

class Suggestion extends preact.Component {
    constructor(props) {
        super(props);

        this.handleCloseDrawer = this.handleCloseDrawer.bind(this);
        this.handleDismissCard = this.handleDismissCard.bind(this);
        this.fetchStitchSuggestions = this.fetchStitchSuggestions.bind(this);
        this.pageName = getPageName();

        this.state = {
            'isLoaded': false,
            'showThankYouMessage': false,
            'suggestions': []
        };
    }

    componentDidMount() {