Toby Toby - 3 months ago 20
React JSX Question

Passing helper text to redux-form

I'm using redux-form 6.0.0-rc.4 and I'm wondering if there's a way to pass an additional property to my

Field
s.

Here's my
renderField
component:

const renderField = field => (
<div className={field.touched && field.error ? 'invalid' : 'valid'}>
<label>{field.input.placeholder}</label>
<input {...field.input} />
{field.touched && field.error && <span><i className="fa fa-warning"></i> {field.error}</span>}
</div>
);


And my
Field
:

<Field name="addressOne" type="text" placeholder="Address One" component={renderField} />


I'd like to be able to pass helper text directly to the
Field
so I can include it in
renderField
. The docs show that redux-form is extremely flexible, but there doesn't seem to be an easy way to achieve this.

EDIT --

When I say "helper text", I mean some copy to guide the user. For example, on a date field I'd like to add text along the lines of "The selected date must be two business days from now" and on a select field it might be "please choose only one from the list". Obviously this would be different for each field.

Answer

It's very easy: all props you pass to Field that aren't used by redux-form are simply passed on to the component. I've added helpText to your example to show you how it works.

const renderField = field => (
  <div className={field.touched && field.error ? 'invalid' : 'valid'}>
    <span>{field.helpText}</span>
    <label>{field.input.placeholder}</label>
    <input {...field.input} />
    {field.touched && field.error && <span><i className="fa fa-warning"></i> {field.error}</span>}
  </div>
);

And Field:

<Field name="addressOne" type="text" placeholder="Address One" component={renderField} helpText="This is my custom help text." />

This is noted as point 3 in the Field documentation for redux-form v6.

Comments