Material ui textfield ith redux form issue

Question

i'm having an issue here which i can't handle I have a textfield which i made compatible with redux form like this:

const renderTextField = props => (
  <TextField {...props} />
);

and i'm using it like this:

<Field
          id="searchCif"
          name="searchCif"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_CIF}
          floatingLabelFixed={false}
          value
        />

Then i writing this in my container:

import { reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
// import { injectIntl } from 'react-intl';
import SearchDefaultView from './views/searchDefaultView';

import { requestCustomerInfo } from './actions/customerActions';

export const mapDispatchToProps = dispatch => (
  {
    requestCustomerInfo: formData =>
      dispatch(requestCustomerInfo(formData))
  }
);

const SearchDefaultReduxForm = reduxForm({
  form: 'customerInfo',  // a unique identifier for this form
})(SearchDefaultView);

const SearchDefaultContainer = connect(
  null,
  mapDispatchToProps
)(SearchDefaultReduxForm);

export default SearchDefaultContainer;

But when i'm writing the value and submit my form the form has NO VALUES. what am i missing?

From the dicumentation i used this:

const renderTextField = ({
                           input,
                           label,
                           meta: { touched, error },
                           ...custom
                         }) =>
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />

const SearchDefaultView = (props) => {
  const { requestCustomerInfo, handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit(requestCustomerInfo)}>
      <Menu
        autoWidth={false}
        style={styleSearchMenu}
      >
        <Divider />
        <Field
          id="searchCif"
          name="searchCif"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_CIF}
          floatingLabelFixed={false}
        />
        <br />
        <Field
          id="searchAFM"
          name="searchAFM"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_AFM}
          floatingLabelFixed={false}
        />
        <br />
        <RaisedButton
          type="submit"
          fullWidth
          primary
          label={SEARCHVIEW_SEARCH}
        />
      </Menu>
    </form>
  );
};

But it is showing me an error in compilation at ...custom

jonahe jonahe · Accepted Answer · 2017-09-14T18:50:10

When you want to use a custom field for Redux-Form, Redux-form gives you access to both props like onChange etc, but also other meta-data (like if the form has been touched or not). These different kinds of props are grouped depending on type. The interesting part for you is that all the attributes associated with a normal input element (like onChange, value, type) are grouped in props.input. So to pass those down to the <TextField /> component you can't use the spread operator (... ) on props directly. You must use it on props.input.

const renderTextField = props => (
  <TextField {...props.input} />
);

You may also have to deal with the fact that the onChange method that <TextField /> expects doesn't necessarily have the same signature as the onChange method that Redux-form provides you. So you may have to do some manual work to make them work together, similar to what I've outlined in this post. You'd have to read up on the documentation of both the onChange of Redux-Form and Material-UI TextField respectively.

You may also be interested to know that for material-ui components, there actually already exists a library that has done that manual work for you: redux-form-material-ui.

Material ui textfield ith redux form issue

2 Answers