Cannot read property 'change' of undefined

import { reduxForm, Field, actionCreators } from 'redux-form'
import Select from 'react-select'

<Select
            value="one"
            options={QT}
            {...input}
            onBlur={() => {
              input.onBlur({...input.value})
              dispatch(actionCreators.change('PostQuestionForm', 'title', input.value.type));
            }
          }
        />

I am trying to change another field value based on what the user select using Select component. If there is any other way to get this done i am open for suggestions. Also why its so hard to control the form state here is above me tbh because in simple controlled input (for example by using Alt.js) state is literally your bitch to manage like you can do anything with it and no one will shed a tear. or maybe im just new to redux and redux form.

but here is what i want to do, i have 2 input fields one one which is select field, now when i select something in the select field i want to put that value into the input field below and then i want to write something in the input field after the selected value also i want that input field value to not exceed certain amount of characters lets say 70 and i want to display the remaining character limit. Now if i were managing my own form state this would be 10 times easier and it took me very less effort when i implemented this logic using Alt.js some time ago.

here is my form component

import React from 'react'
import { reduxForm, Field, actionCreators } from 'redux-form'
import AuthB from 'AuthB'
import Select from 'react-select'
import 'react-select/dist/react-select.css';
import QT from './question-type'
require('./ask.scss')

const validate = values => {
    let errors = {}
    if(!values.title || values.title.length <= 0){
      errors.title = ' is required'
    } else if(values.title.length > 70){
      errors.title = ' is more than 70'
    }
    if(!values.description || values.title.length <= 0){
      errors.description = ' is required'
    } else if(values.description.length > 200){
      errors.description = ' is more than 200'
    }
    if(!values.type){
      errors.type = ' is required'
    }
    return errors
}

const renderTextarea = ({ input, label, type, meta: { touched,  error, warning } }) => {
  return(
    <div className="box">
      <label>
        {label}
        {touched && (error && <span className="control-label" htmlFor={label}>{error}</span>)}
      </label>
      <div className={
          (touched && error) ? input.name+'-box has-error' : input.name+'-box'
      }>
        <textarea type={type} id={label} {...input} placeholder={label} />
      </div>
    </div>
  )
}

const renderInput = ({ input, label, type, meta: { dispatch, touched, error, warning, submitting } }) => {
  let title = input.value
  return(
    <div className="box">
      <label>
        {label}
        {touched && (error && <span className="control-label" htmlFor={label}>{error}</span>)}
      </label>
      <div className={input.name+'-box'}>
        <input type={type} id={label} {...input} onChange={()=> input.onChange(title)} placeholder={label} />
      </div>
    </div>
  )
}

const renderSelect = ({input, label, type, meta: { dispatch, touched, error, warning } }) => {
  return (
    <div className="box">
      <label>
        {label}
        {touched && (error && <span className="control-label" htmlFor={label}>{error}</span>)}
      </label>
      <div className="select-box">
        <Select
            value="one"
            options={QT}
            {...input}
            onBlur={() => {
              input.onBlur({...input.value, hey:'whats'})
              dispatch(actionCreators.change('PostQuestionForm', 'title', 'cityValue'));
            }
          }
        />
      </div>
    </div>
  )
}

let QuestionForm = props => {
  const { dispatch, handleSubmit, invalid, submitting, error } = props
  const doSubmit = values => alert('hi')
  return(
    <form onSubmit={handleSubmit(doSubmit)}>
      <div className="group ask-wrapper">
        <div className="ask-heading">
          <h3>Have a question? Just ask...</h3>
          <h6>
              It is as important how you ask your question than what you are asking!
          </h6>
        </div>
        <hr/>
          <Field name="type" type="text" label="Select a starting phrase" component={renderSelect}/>
          <Field name="title" type="text" label="Question Title" component={renderInput}/>
          <Field name="description" type="text" label="Description" component={renderTextarea}/>
          <Field name="tag" type="text" label="Select tags" component={renderInput}/>
        <hr/>
        <div>
          <button disabled={submitting} type="submit">And thats it</button>
        </div>
        <div className="clearfix"></div>
      </div>
    </form>
  )
}

QuestionForm = reduxForm({
  form: 'PostQuestionForm',
  validate,
})(QuestionForm)

export default AuthB(QuestionForm)

[elmeister]

What about this.props.change('name', '')

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.