React-redux-form: Uncaught TypeError: Cannot read property 'checkWithValue' of undefined

[DanielLuu]

Uncaught TypeError: Cannot read property 'checkWithValue' of undefined when trying the custom components example

[davidkpiano]

Can you point me to the example?

[DanielLuu]

```import { createFieldClass, controls } from 'react-redux-form';
import TextField from 'material-ui/lib/text-field';

const MaterialField = createFieldClass({
'TextField': controls.text
}, {
componentMap: {
TextField: TextField
}
});

// render():


```

[davidkpiano]

Try to avoid using createFieldClass - it's essentially deprecated as of v1.0. See here for a guide on making custom components: http://davidkpiano.github.io/react-redux-form/docs/guides/custom-controls.html

The above example would instead be:

import { Control } from 'react-redux-form';
import TextField from 'material-ui/lib/text-field';

// ...

const MaterialField = (props) => (
  <Control.text
    component={TextField}
    {...props}
  />
);

Much better, right? 😄

[DanielLuu]

Ok awesome I was looking at the outdated docs. Thanks for the updated link.

[DanielLuu]

Quick question how would I go about doing the select?

[davidkpiano]

Looks like it would just be:

import { Control } from 'react-redux-form';
import SelectField from 'material-ui/SelectField';

const MaterialSelectField = (props) => (
  <Control.select component={SelectField} {...props} />
);

Please let me know if this works! Haven't played around much with material-ui.

[DanielLuu]

No... not exactly working here's my code

input = <Control.select
                    model={template.key + '.' + question.key}
                    component={DropDownMenu}
                    value={this.state.value}
                    onChange={this.handleChange}
                  >
                    <MenuItem value={1} primaryText="Never" />
                  </Control.select>

[davidkpiano]

I'd need to see a full code example - try putting one up on www.esnextb.in

[DanielLuu]

https://esnextb.in/?gist=ee823998a00333398edb3faaf77df951

[davidkpiano]

I can't reproduce it due to this problem: https://github.com/callemall/material-ui/issues/5595

[DanielLuu]

Yeah sorry the esnextb isn't working but basically is there a way to get/set the value the control handles?

[DanielLuu]

Basically I want to make a custom onchange for control since Material UI handles that differently

[davidkpiano]

Hm, mind opening up another issue for this? Also, try using plain <Control> instead of <Control.select>.

[DanielLuu]

Actually I got it to work by making a custom component wrapper that dispatches the actions on change and grabs the values from the state.

[davidkpiano]

Oh, awesome! Mind sharing the code for that?

[DanielLuu]

value is grabbed like so
this.props['model_name'][question]

the question obj is just data passed to the component

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

export class CustomSelect extends React.Component {
  render() {
    const { model, dispatch, question, value } = this.props;
    return (
      <SelectField
        value={value}
        onChange={(event, index, value) => {
          dispatch(actions.change(model, value));
        }}
        floatingLabelText={question.label}
        className={question.class}
        fullWidth={true}
      >
        {
          question.options.map((option, index) => {
            return <MenuItem key={index} value={option.value} primaryText={option.text} />
          })
        }
      </SelectField>
    );
  }
}