Sample react form

Forms.js

import React from 'react';
import ReactDOM from 'react-dom';

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: props.value };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setValue(event.target.value);
    }
    setValue(valueFromEditor) {
        this.setState({
            value: valueFromEditor
        })
    }
}

class TextEditor extends Editor {
    render() {
        return (<input type="text" value={this.state.value} onChange={this.handleChange} />)
    }
}

class NumberEditor extends Editor {
    render() {
        return (<input type="number" value={this.state.value} onChange={this.handleChange} />)
    }
}

class DropdownEditor extends Editor {
    setValue(valueFromEditor) {
        this.setState({
            selectedValue: valueFromEditor
        });
    }
    render() {
        var elements = this.props.value.availableOptions.map(el => {
            return (<option value={el.value} key={el.value}>{el.text}</option>)
        });
        return (<select value={this.state.selectedValue} onChange={this.handleChange}>{elements}</select>)
    }
}

class TemplateProvider {
    constructor() {
        this.templates = {}
    }
    registerTemplate(name, template) {
        this.templates[name] = template;
    }
    getTemplate(name) {
        return this.templates[name];
    }
}

const templateProvider = new TemplateProvider()
templateProvider.registerTemplate("text", TextEditor);
templateProvider.registerTemplate("number", NumberEditor);
templateProvider.registerTemplate("dropdown", DropdownEditor);


class EditorLine extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {value:props.value};
    }

    handleChange(event) {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        const Template = templateProvider.getTemplate(this.props.template);
        return (
            <div>
                <label>{this.props.label}</label>
                <Template value={this.state.value} />
            </div>
        )
    }
}

class Page extends React.Component {
    constructor() {
        super();
        this.state = {
            firstName : "Cezar" ,
            lastName :  "Piątek" ,
            age :  28,
            language : {                 
                selectedValue: "PL", 
                availableOptions: [
                        { text: "Polish", value: "PL" }, 
                        { text: "English", value: "EN" }
                ] 
             } 
        }
        
    }
    render() {
        return (
            <div>
                <div>
                    <EditorLine label="First name" value={this.state.firstName} template="text" />
                    <EditorLine label="Last name" value={this.state.lastName} template="text" />
                    <EditorLine label="Age" value={this.state.age} template="number" />
                    <EditorLine label="Language" value={this.state.language} template="dropdown" />
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);