redux-form-material-ui using getRenderedComponent() throws always an error

Question

I'm basing on official example from redux-form-material-ui repo. My code looks like that:

import React from 'react';
import { Field } from 'redux-form';
import { TextField } from 'redux-form-material-ui';

export default class FormTextField extends React.Component {

  constructor(props) {
    super(props);
  }

  componentWillUpdate(nextProps) {
    const { name, withRef, focus } = nextProps;
    if (withRef && focus) {
      this.refs[name]
        .getRenderedComponent()
        .getRenderedComponent()
        .focus();
    }
  }

  render() {
    const { name, label, errorText, withRef } = this.props;

    return (
      <Field
        name={name}
        component={TextField}
        hintText={label}
        floatingLabelText={label}
        errorText={errorText}
        ref={name}
        withRef={withRef}
      />
    );
  }
}

I'm passing focus and withRef properties ONLY for first field with error. On this field I always get an error: Uncaught (in promise) Error: If you want to access getRenderedComponent(), you must specify a withRef prop to Field(…)

I' able, to see both ref and withRef passed to Field. Then in component with ref="wrappedInstance" I can still see withRef="true". It is not passed deeper.

I would appreciate any thoughts how to solve it.

Erik R. Erik R. · Accepted Answer · 2016-07-07T13:31:28

You needn't make your ref a prop, as it is local to your component. You can just call it ref="field" if you wish. Although this is probably not your problem.
Also, you might as well be passing withRef all the time.

It sounds like you are wanting to call focus() when the focus prop changes from false to true. For that, you should be doing something like:

componentWillUpdate(nextProps) {
  if (!this.props.focus && nextProps.focus) {
    this.refs.field
      .getRenderedComponent()
      .getRenderedComponent()
      .focus()
  }
}

Does that help?

redux-form-material-ui using getRenderedComponent() throws always an error

1 Answers