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

class SelectOrType extends React.Component {
    state = {
        select: '',
        input: '',
        text: 'inne',
        display: false,
    }

    handleChangeSelect = (e) => {
        this.setState({
            select: e.target.value,
            display: e.target.value === 'other' ? true : false,
        });
    }

    handleChangeInput = (e) => {
        this.setState({
            input: e.target.value,
        });
    }

    handleClick = (e) => {
        this.setState({
            text: this.state.input,
            display: false,
        })
    }

    render() {

        const options = this.props.items.map( (i) => {
            return <option value={ i }>{i}</option>
        });

        const style = {
            display: this.state.display ? 'block' : 'none',
        }

        return (
            <div>
                <select onChange={this.handleChangeSelect} value={ this.state.select }>
                    {options}
                    <option value="other">{this.state.text}</option>
                </select>
                <div style={style}>
                    <input value={this.state.input} onChange={this.handleChangeInput} />
                    <button onClick={this.handleClick}>save</button>
                </div>
            </div>
        )
    }
}

class App extends React.Component {
    render() {
        return <SelectOrType items={ ['BMW', 'Jaguar', 'Porshe'] } />
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});