react.js

//Field.js
//@flow
import FieldPure from './Field.pure'
import React from 'react'

type PropsType = {
	value: string,
	header: string,
	onChange: string => void | () => void,
	type: 'text' | 'password',
	className: string,
}
type StateType = {
	value: string,
}

class Field extends React.Component<PropsType, PropsType, StateType> {
	static defaultProps: PropsType = {
		className: '',
		header: '',
		onChange: () => {},
		type: 'text',
		value: '',
	}
	state: StateType

	constructor(props: PropsType) {
		super(props)
		this.state = {
			value: props.value,
		}
	}

	changeValue(value: string) {
		this.setState({
			...this.state,
			value,
		})
		this.props.onChange(value)
	}

	render() {
		return <FieldPure
			OnChange={this.changeValue.bind(this)}
			header={this.props.header}
			value={this.state.value}
			className={this.props.className}
		/>
	}
}

export default Field

////Field.pure.js
//@flow
import css from './Field.css'

type PropsType = {
	value: string,
	header: string,
	OnChange: string => void,
	className: string,
}

const FieldPure = ({header, value, OnChange, className}: PropsType) => {
	const EventOnChange = (event: SyntheticInputEvent) => OnChange(event.target.value)
	return (
		<div className={className}>
			<label>
				<div className={css.header}>{header}:</div>
				<input type='text' className={css.value} value={value} onChange={EventOnChange} />
			</label>
		</div>
	)
}

export default FieldPure