Warning: Failed prop type: Invalid prop `initialValues` supplied to `Form(AddComment)`

Question

My application has dynamic routes (dynamic route param), in which it contains the redux form.In order to distinguish the form data, I need to post redux form data along with the react route param.

I have passed the react route param as props from the parent component to the child component having the redux form i.e, initial values in props have the param value.I want to initialize the route param to the input field with hidden type.

import React from 'react';
import { Field, reduxForm,propTypes } from 'redux-form';
import submit from '../actions/commentActions'
import connect from 'react-redux';
const validate = values => {
  const errors = {}
  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }

  if (!values.message) {
    errors.message = 'Required !!'
  }else if (values.message.length > 15) {
    errors.message = 'Must be 15 characters or less'
  }
  return errors
}

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <div>
      <input {...input} placeholder={label} type={type} className="form-control" />
      {touched &&
        ((error && <span className="text-danger">{error}</span>) )}
    </div>
  </div>
)

const renderTextAreaField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <div>
      <textarea {...input} rows="3" placeholder={label}
      className="form-control shareThought mt-1"></textarea>
      {touched &&
        ((error && <span className="text-danger">{error}</span>) )}
    </div>
  </div>
)

const AddComment = props => {
  const { error,handleSubmit, pristine, reset, submitting,initialValues } = props;
  // console.log(initialValues); prints route param i.e honda
  // console.log(props);

  return (
      <div className="leaveComment pb-2">
        <form onSubmit={handleSubmit(submit)}>
            <Field
              name="email"
              component={renderField}
              type="email"
              label="Email Id"
              placeholder="Enter Email"
            />

            <Field name="message"
             component={renderTextAreaField}
             label="Share Your thought"
             type="text"
             />

            <Field name="modelname"
             type="text"
             component="input"
             value={initialValues}
             hidden
             />

             <span className="text-danger">{error && <span>{error}</span>}</span>

            <div className="row mx-0" >
              <button type="submit" className="btn btn-sm btn-info btn-block mt-2" disabled={pristine || submitting}>Leave a comment</button>
            </div>
        </form>
      </div>
  );
};

export default reduxForm({
  form: 'addcommentmsg', 
  validate
})(AddComment);

Answer 1

I solved this issue by passing initialValues with key-value

let initialValues = {
        initialValues: {
          modelname: this.props.pageId
        }
    };

Therefore you dont have to define the initialValues either in input field or props.