Question: I am trying to use React refs to focus a Redux-Form Field when it mounts. 

When I try `this.refs.title.getRenderedComponent().focus()` in `componentDidMount`, an error is thrown saying: 

`edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined`

When I console.log this.refs, it is mostly an empty object and sometimes identifies 'title' as being a ref, but it is not dependable. 

Am I using refs incorrectly? My code is below for reference. 

```
componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

```

...

```
 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />

```

Answer: 
Please try setting ref using callback function:

```
ref={(input) => { this.title = input; }}

```

and then use this to get underlying DOM node:

```
ReactDOM.findDOMNode(this.title).focus();

```

of if DOM input element is wrapped in another element:

```
ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()

```

According to React docs using refs with a string have some issues. Please check [docs](https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs) for more details.
I use redux-form and [Material UI](https://material-ui.com) and had to do the following. `MaterialCheckboxField` and `MaterialTextField` are custom components in my project wrapping `material-ui/{Checkbox,TextField}`.

I converted `MaterialTextField` to a *class component* (as stipulated in the [React docs](https://reactjs.org/docs/refs-and-the-dom.html)).

> 
> You may not use the `ref` attribute on *function* components because they **don’t have instances**.
> 
> 
> 

```
import { findDOMNode } from "react-dom";

```

The field setting focus (within the `render()` method):

```
<Field
  component={MaterialCheckboxField}
  label="Checkbox"
  name="..."
  onClick={event => {
    if (!event.target.checked) return;
    // focus() field after grace period
    // oddity of Material UI, does not work without
    window.setTimeout(() => this.textField.focus(), 150);
  }}
/>

```

> 
> **Material UI specific**  
> 
>  Suggestion to allow a grace period using `setTimeout()` from [this SO question](https://stackoverflow.com/questions/37949394/how-to-set-focus-to-a-materialui-textfield). Consider @Lukas' comment:
> 
> 
> *"This code may throw. What would be even better is to save `setTimeout()` returned ID to component and on
>  `componentWillUnmount()` check if the timeout is still there and clear
>  it if so"*
> 
> 
> 

The field that will receive focus (within the `render()` method):

```
<Field
  component={MaterialTextField}
  label="Text field"
  name="..."
  ref={ref => {
    const node = findDOMNode(ref);
    if (node) {
      // Material UI wraps input element, 
      // use querySelector() to obtain reference to it
      // if not using MUI, querySelector() likely not needed
      this.textField = node.querySelector("input");
    }
  }}
  withRef
/>

```

> 
> **Note**  
> 
>  I am using Material UI `0.x`, not sure if that's why
>  `React.CreateRef()` didn't work for me (the recommended approach
>  [since React 16.3](https://reactjs.org/docs/refs-and-the-dom.html)).
> 
> 
>