app.ts

                    <UIBuilderForm
                        schemaData = {this.props.dataReducer}
                        onSubmit={showResults}
                    ></UIBuilderForm>

select_form.ts

import * as React from 'react'
import {connect} from 'react-redux'
import {Field, reduxForm, FieldArray, formValueSelector} from 'redux-form'
import {getTableScheme} from '../actions/DataAction'

class UIBuilderForm extends React.Component<any, {}> {

    render() {
        const {
            tableName,
            TableSchemaName,
            handleSubmit, pristine, reset, submitting, schemaData = {
            viewStructureList,
            tableList
        }
        } = this.props;
        console.log('schemaData')
        console.log(schemaData)

        const SegmentedControl = ({input, disabled, heading, required, className, items, name, meta: {touched, error}}) => (
            <fieldset className={`form__field ${className || ''}`}>

                <legend className="form__label">
                    {heading}{required ? (<span>*</span>) : null}
                    { (touched && error) ? (
                        <span className="form__error"> {error}</span>
                    ) : null }
                </legend>

                <div>
                    {/*{ items.map((item, i) => (*/}
                    {/*<pre key={item.url}>*/}
                    {/*{JSON.stringify(item)}*/}
                    {/*</pre>;*/}
                    {/*)}*/}
                </div>
            </fieldset>
        );

        const selectTableScheme = ({input, label, type, items, meta: {touched, error}}) => (
            <select
                onChange={event => {
                        console.log(input);
                        console.log(this.props);
                        console.log(this.props.fields);
                        this.props.tableNameOnChange(event.target.value);
              }}
            >
                <option value={input.value}>Select</option>
                {
                    items.map((item:any, i:integer) =>
                        <option key={item.id} value={item.id}>{item.name}</option>
                    )
                }
            </select>
        )
        
        const renderField = (field:any) => (
            <input {...field.input} type="text" onChange={ (e) => {
                debugger
                field.onChangeAction(field.input.value);
                field.input.onChange(e);
            }}/>
        );

        return (
            <form onSubmit={handleSubmit}>
                <div>
                    <label>Choose Object</label>
                    <div>
                        {
                            schemaData.tableList.map((item:any, i:integer) =>
                                <label key={item.id}><Field
                                    key={item.id} name="sex" component="input" type="radio" value={item.id}/> {item.id}
                                </label>
                            )
                        }
                        <Field component={selectTableScheme}
                               items={schemaData.tableList}
                               name="tableName"
                               onBlur={() => console.log('bug squashed!')}
                        >
                            {/*<option value="#ff0000">Red</option>*/}
                            {/*<option value="#00ff00">Green</option>*/}
                            {/*<option value="#0000ff">Blue</option>*/}
                        </Field>
                    </div>

                    <div>
                        <label>Favorite Color</label>
                        <div>
                            <Field name="favoriteColor" component="select" onChange={(event, value) => debugger}>
                            <option></option>
                            <option value="#ff0000">Red</option>
                            <option value="#00ff00">Green</option>
                            <option value="#0000ff">Blue</option>
                            </Field>
                        </div>
                    </div>

                </div>

                <Field name="viewStructureList123"
                       component={SegmentedControl}
                       items={schemaData.viewStructureList}
                />

                <div>
                    <label>Last Name</label>
                    <div>
                        <Field name="lastName" component="input" type="text" placeholder="Last Name"/>
                    </div>
                </div>
                <div>
                    <button type="submit" disabled={pristine || submitting}>Submit</button>
                    <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
                </div>
            </form>
        );
    }
}

const mapStateToProps = function (state:any) {
    return {
        ...state.register,
        ...state.error
        //error: state.error //old method where error.isActive, error.message existed
        //redux-form did not like this nesting, so just made
        //errorIsActive and errorMessage vars
    };
};

const mapDispatchToProps = function (dispatch:any, props:any) {
    return {
        onSubmit: function (values:any) {
            debugger
        },
        tableNameOnChange: function (tableId:any) {
            dispatch(getTableScheme(tableId))
        }
    };
};

UIBuilderForm = reduxForm({
    form: 'dashbaordUiBuilderForm',
    fields: ['tableName']
}
})
(UIBuilderForm as any);

// Decorate with connect to read form values
const selector = formValueSelector('dashbaordUiBuilderForm')
// export default UIBuilderForm

export default connect(mapStateToProps, mapDispatchToProps, null, {} )(UIBuilderForm);
// export default connect(state => {
//     const TableSchemaName = selector(state, 'TableSchemaName')
//     const tableName = selector(state, 'tableName')
//     return {
//         tableName,
//         TableSchemaName
//     }
// }, mapDispatchToProps)(UIBuilderForm);