Redux-Form, how to use a Ref with a renderField?

Question

I'm trying to add a ref attribute to one of my redux-form fields.. Here's the code:

let renderField = ({input, label, placeholder, type, meta: {submitFailed, touched, error, pristine}}) =>

  <div className={classNames("form-group", {
    "has-danger": (submitFailed && error) || (!pristine && touched && error),
    "has-success": !pristine && touched && !error
  })}>
    <textarea {...input} type={type} placeholder={placeholder} className={touched ? (error ? "form-control form-control-danger" : "form-control form-control-success") : "form-control"} />
  </div>

..... within the render func

      <Field
        name="message"
        type="textarea"
        component={renderField}
        placeholder="Enter your message..."
        validate={[required]}
        ref="message"
        withRef={true}
      />

I'm getting the following error:

Warning: Stateless function components cannot be given refs (See ref "renderedComponent" in renderField created by ConnectedField). Attempts to access this ref will fail

How can I get a ref added to my redux-form Field?

Answer 1

You should create class instead of function.

import React, { Component } from 'react';

export default class RenderField extends Component {
  render() {...}
}