Var Container Example

varContainer.js

import React from 'react';
import { connect } from 'react-redux'
import _ from 'lodash'

// Components
import Tabs from '../parts/tabs'
import Card from '../parts/card'
import Field from '../parts/field'
import Input from '../parts/input'
import Select from '../parts/select'
import TextArea from '../parts/textArea'

import { checkIfFieldIsDirty } from '../../actions/fields'
import { saveNewID } from '../../actions/id'

import Store from '../../store'

var VAR_OPTIONS_NEW = {
    optionA: {
        name: 'Option A',
        suboption: ['Suboption A1', 'Suboption A2', 'Suboption A3']
    },
    optionB: {
        name: 'Option B',
        suboption: ['Suboption B1', 'Suboption B2', 'Suboption B3']
    },
    optionC: {
        name: 'Option C',
        suboption: ['Suboption C1', 'Suboption C2', 'Suboption C3']
    }
}

export let VarContainer =  ({
  i18n,
  saveNewID,
  varOptions
}) => {

  return (
    <div>

      <Card header={i18n.password}>
        
        <Field
          type={Input}
          id="docDate"
          class="col-12"
          i18n={i18n.docDate}
          inputType="docDate"
          validations={['docDate']}
        />

        <Field
          type={Select}
          options={VAR_OPTIONS_NEW}
          optionValue="value"
          id="varType"
          class="col-12"
          i18n={i18n.varType}
        />

      </Card>

      <button
        className="buttonProblem"
        onClick={() => { saveNewID() }}>
          {i18n.create}
      </button>

    </div>
  )

}

const mapStateToProps = (state) => {
  return {
    i18n: state.i18n. Var,
    varOptions: VAR_OPTIONS_NEW
    fields: state.fields
  }
}

const mapDispatchToProps = dispatch => ({
  saveNewID: () => dispatch(saveNewID())
})

export default connect(mapStateToProps, mapDispatchToProps)(VarContainer)