Text field stays empty

Question

I'm trying to integrate a React-Toolbox Input component with Redux-Form. However, the Input component remains empty when typing. I'm using https://github.com/react-toolbox/react-toolbox/issues/1293 as a guide for the integration.

import React from 'react'
import PropTypes from 'prop-types'

import { Field, reduxForm } from 'redux-form'
import Input from 'react-toolbox/lib/input'

const renderField = ({ input, meta, ...props }) => (
  <Input
    { ...input }
    { ...props }
    error={ meta.touched && meta.error } />
)

const Form = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <Field
      name="myTextField"
      component={renderField}
      type="text"
    />
  </form>
)

Form.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
}

export default reduxForm({
  form: 'myForm',
})(Form)

This is using react-toolbox 2.0.0-beta.12 and redux-form 7.2.0

Answer 1

You use input, meta and another ...props in your "functional component" renderField, but renderField props argument is named field and is not used anywhere.

You should change renderField this way:

const renderField = ({ input, meta, ...props }) => (
  <Input
    { ...input }
    { ...props }
    error={ meta.touched && meta.error }
  />
);

UPD

redux-form Basic Usage Guide says:

The redux store should know how to handle actions coming from the form components. To enable this, we need to pass the formReducer to your store. It serves for all of your form components, so you only have to pass it once.

So you should pass formReducer to your store:

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer
})

const store = createStore(rootReducer)