header-mobx.js

import Database from '$stores/db'
import Select from 'react-select'
import * as T from '../../types'

type HeaderState = { value: number }
type PropsState = { data: { items: Array<T.ItemEntry> } }

@Database.provide()
@component
export default class Header {
  props: PropsState;
  state: HeaderState = { value: 0 }
  deleteItem: () = () => {
    Database.remove(this.state.value)
    this.setState({ value: 0 })
  };
  onChange: ((newValue: string) => void) = newValue => {
    this.setState({ value: newValue.value })
  };
  render() {
    return (
      <div>
        <h3 style={{color: '#ff3300'}}>Item removal</h3>
        <Select
            name="form-field-name"
            value={this.state.value}
            options={this.props.data.items.map(i => ({ value: i.key, label: i.value.text || i.value.color || '' }))}
            onChange={this.onChange}
        />
        <button className="btn btn-danger btn-small" onClick={this.deleteItem}>Delete the selected Item</button>
      </div>
    )
  }
}