Non working

function listTowns (selector) {
        let Form = React.createClass({
            render: function () {
                return(
                    <form onSubmit={this.props.onSubmit} >
                        <input type="text" />
                        <input type="submit" value="Submit"/>
                    </form>
                );
            }
        });

        let List = React.createClass({
            render: function () {
                let key = 0;
                if (this.props.towns.length === 0){
                    return null;
                }
                else{
                    let towns = this.props.towns.split(', ');
                    let result = [];
                    for (let town in towns){
                        result.push(<li key={town}>{towns[town]}</li>)
                    }
                    return <ul>{result}</ul>
                }
            }
        });

        let App = React.createClass({
            getInitialState: function () {
                return {towns: ''};
            },
            render: function () {
                return (
                    <div>
                        <Form onSubmit={this.handleSubmit} />
                        <List towns={this.state.towns} />
                    </div>
                );
            },
            handleSubmit: function (event) {
                event.preventDefault();
                this.setState({towns: event.target[0].value})
            }
        });

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