redux-form textarea value not updating

Question

I have a redux form with two input fields and one textarea. The input field values are updated for each keypress and the validate function gets the right values. But the textarea keychanges are not reflected in the validate function. Any help ? The entire code is:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import { createPost } from '../actions/index';

const renderInput = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
);

const renderTextArea = ({textarea, meta: { touched, error, warning }}) => (
    <div>
        <label>Content</label>
        <div>
            <span>{textarea}</span>
            <textarea {...textarea} placeholder="Content" rows="10" cols="40"></textarea>
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
    </div>
);

class PostsNew extends Component {

    render() {
        const { handleSubmit, title, categories, content } = this.props;
        return (
            <form onSubmit={handleSubmit(createPost)}>
                <Field name="title" component={renderInput} label="Title" type="text" {...title} />
                <Field name="categories" component={renderInput} label="Categories" type="text" {...categories} />
                <Field name="content" component={renderTextArea} {...content} />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

const validate = values => {
    const errors = {}
    if (!values.title) {
        errors.title = 'Required';
    }
    if (!values.categories) {
        errors.categories = 'Required';
    }
    console.log("######", values);
    console.log("@@@@", values.content);
    if (!values.content) {
        errors.content = 'Content cannot be empty';
    } else if (values.content.length < 3) {
        errors.content = 'Content should be more than 3 characters';
    }

    return errors;
}

export default reduxForm({
    form: 'NewPostForm',
    validate
})(PostsNew);

The console.log function calls in the validate function return the right value for the two input fields on each keypress but not the value for the content.

If I replace the textarea Field line, with the following line, the content value is correctly logged on each keypress in the text area (but I cannot validate).

Updated line: <Field name="content" component={textarea} {...content} /> that results in the console.log to reflect keypress.

Answer 1

Looks like a classic search-and-replace error. :-)

const renderTextArea = ({textarea, meta: { touched, error, warning }})
                         ^^^^^^^^

There's your problem. The key is input. Try:

const renderTextArea = ({input, meta: { touched, error, warning }}) => (
    <div>
        <label>Content</label>
        <div>
            <textarea {...input} placeholder="Content" rows="10" cols="40"/>
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
    </div>
);