Same name of field in redux-form

Question

I am working on a comment section and using redux-form for taking input. I have only one Field component for taking input. But when I type in the input box all the input boxes get filled with the same value. I know this is because all these input boxes have the same name. But I only want to fill the value to the selected input box. How do I do this?

Here is my Component:

import { compose } from "redux";
import { connect } from "react-redux";
import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";

import { addComment, fetchPosts } from "../../../actions/FeedPost";
import "./FeedCommentsInput.css";
import TextareaAutosize from "react-textarea-autosize";

class FeedCommentsInput extends Component {
  renderField = field => {
    const { touched, error } = field.meta;
    const className = `comment-input-box ${
      touched && error ? "red-border__error-comment" : ""
    }`;
    return (
      <TextareaAutosize
        {...field.input}
        placeholder={field.placeholder}
        type={field.type}
        className={className}
      />
    );
  };

  onSubmit = formProps => {
    const { postid } = this.props;
    this.props.addComment(formProps, postid);
  };

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            name="text"
            component={this.renderField}
            type="text"
            placeholder="Enter your Comment"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

const validate = values => {
  const errors = {};

  if (!values.comment) errors.comment = "Please Enter Something";

  return errors;
};

export default compose(
  connect(
    null,
    { addComment, fetchPosts }
  ),
  reduxForm({ validate, form: "commentbox" })
)(FeedCommentsInput);

Answer 1

Just pass unique form prop to your Form component.

Your redux-form integration would change to :

// No need to configure `form`, because it would be set dynamically via props
reduxForm({ validate })

Usage:

<Form form={`commentbox_${uuid}`} />

Credits .

Answer 2

Your have many comments form but all comments box using the same form ( commentbox ), this make a issue.

Your need dynamic create a form with an index subfix:

const commentForm1 = reduxForm({ validate, form: "commentbox_1" })
const commentForm2 = reduxForm({ validate, form: "commentbox_2" })

Answer 3

This is why I believe that when working with complex libraries like reduxForm establishing a base case and getting it working is important. What I mean is I would implement a simple form first, ensure that works before moving on to write that ton of code you wrote to later find out something is not working properly.

For example, I would have started with this:

class FeedCommentsInput extends Component {
  render() {
    return ( 
    <div>
       <form onSubmit={this.props.handleSubmit(values => console.log(values))}>
           <Field type=“text” name=“feedTitle” component=“input” />
        <button type=“submit”>Submit</button>
       </form>
    </div>
    );
  }
}

export default reduxForm({ form: 'FeedCommentsInput' })(FeedCommentsInput);

No validations, nothing else, just this simple setup, import and export statements included of course. Now with this setup when a user submits the form, the function passed to us by redux form will be called and it will internally call the function I passed inside onSubmit .

Then I would go to the browser and test it out by adding in some text and clicking submit and when I do I should see a console log with a key of feedTitle and the value of the text I typed.

This is pretty much the entire flow of reduxForm in a nutshell and it what I would have established first to ensure everything is working.

When I add on the onSubmit handler to the form and then call handleSubmit() inside of there and provide my arrow function. The arrow function will be called automatically whenever the user submits the form.

The values object inside the console log is the text that got entered into the input and the key of the object is the name added to the Field component. This is why the name property required by the Field component can also be leveraged to help you. If you did not see feedTitle then you would know something is not working correctly way before you go on to write code for validations and so on.