preact defaultProps

by amindunited

HTML

<script src="https://npmcdn.com/preact-svg"></script>
<script src="https://npmcdn.com/proptypes"></script>
<script src="https://npmcdn.com/preact-compat"></script>
<script src="//unpkg.com/preact.js"></script>
<script src="//unpkg.com/preact/hooks/dist/hooks.umd.js"></script>
<script src="//unpkg.com/preact/compat/dist/compat.umd.js"></script>

Babel + JSX

//const { h, Component, render } = preact; /** @jsx h */
let React = preactCompat;
let ReactDOM = preactCompat;

const PROPS = [
	{ },
	{ a:'set' },
	{ a:'set', b:'set' },
	{ a:'set', b:'set', c:'set' }
];

class Demo extends React.Component {
	state = { props:{} };
	setProps(props) {
		this.setState({ props });
	}
	render() {
		return (
			<div>
				<header>
					{ PROPS.map( props => (
						<button onClick={() => this.setProps(props)}>
							{JSON.stringify(props)}
						</button>
					)) }
				</header>
				<section>
					<h4>Child</h4>
					<Child {...this.state.props} />
				</section>
				<section>
					<h4>preact-compat Child</h4>
					<CompatChild {...this.state.props} />
				</section>
			</div>
		);
	}
}

class Child extends React.Component {
	static defaultProps = {
		a: 'default',
		b: 'default'
	};
	
	render(props) {
		return <pre>{ JSON.stringify(props,0,'  ') }</pre>
	}
}

let CompatChild = preactCompat.createClass({
	getDefaultProps() {
		return {
			a: 'default',
			b: 'default'
		};
	},
	render() {
		return <pre>{ JSON.stringify(this.props,0,'  ') }</pre>
	}
});

ReactDOM.render(<Demo />, document.body);