class ItemEditor extends PureComponent {
    constructor(props) {
        super(props);
        var item = this.props.item || {};
        this.state = {
            itemId: item.id || '',
            itemName: item.name || ''
        }
        this.onSave = this.onSave.bind(this);
        this.onItemPropChange = this.onItemPropChange.bind(this);
    }

    createChangedItem() {
        return {id: this.state.itemId, name: this.state.itemName};
    }

    onItemPropChange(propName, e) {
        let st = {};
        st[propName] = e.target.value;
        this.setState(st);
    }

    onSave(e) {
        if (this.props.onSave) {
            const item = Object.assign({}, this.createChangedItem());
            this.props.onSave(this.props.item, item);
        }
    }

    render() {
        return (
            <div>
            <input type="text" value={this.state.itemId} onChange={(e) => this.onItemPropChange('itemId', e)}/>
            <input type="text" value={this.state.itemName} onChange={(e) => this.onItemPropChange('itemName', e)}/>
            <button onClick={this.onSave}>Save</button>
            </div>
        );
    }
}