ListTown

function listTowns(selector) {
        let Form = React.createClass({
            render: function () {
                return <form onSubmit={this.props.onsubmit}>
                    <input type="text" placeholder="town, town" />
                    <input type="submit" defaultValue="Submit" />
                </form>
            }
        });
        let List = React.createClass({
            render: function () {
                let cities = this.props.cities.filter(c => c != '');
                cities = cities.map((c, i) => { return <li key={i}>{c}</li> });
                return <ul>{cities}</ul>
            }
        });
        let App = React.createClass({
            getInitialState: function () {
                return {
                    cities: []
                }
            },
            onSubmitHandler: function (event) {
                event.preventDefault();
                let cities = event.target.children[0].value.split(/,\s+/);
                this.setState({
                    cities: cities
                })
            },
            render: function () {
                return <div>
                    <Form onsubmit={this.onSubmitHandler}/>
                    <List cities={this.state.cities}/>
                </div>
            }
        });

        ReactDOM.render(
                <App/>,
                document.getElementById(selector)
        );
    }