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);

What do you mean by `all the input boxes get filled`, I can see only one textbox here — mbeso, Oct 23 '18 at 10:18
@mbeso he's including the same form multiple times on the same page. One post has many comments. — Jordan Enev, Oct 23 '18 at 10:22
Looks like you found the answer to your question, I would recommend that in the future when asking about state in regards to `reduxForm`, you include your `reducers/index.js` file so we can see how you set up `formReducer`. — Daniel, Oct 23 '18 at 13:02

score 3 · Accepted Answer · answered Oct 23 '18 at 10:18

3

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.

answered Oct 23 '18 at 10:18

Jordan Enev

16,904
3
42
67

score 1 · Answer 2 · answered Oct 23 '18 at 10:23

1

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" })

answered Oct 23 '18 at 10:23

Kenzk447

525
2
7

Actually that's the same answer as mine. What's the point of posting the same answer twice? :) – Jordan Enev Oct 23 '18 at 10:44
i completed my answer in 10 minutes, when i start comment i do not see your aswer = )) – Kenzk447 Oct 23 '18 at 10:53
@JordanEnev, as you well know, posts get audited so I would not worry about it. If something is remiss, it will be addressed. – Daniel Oct 24 '18 at 16:25

score 1 · Answer 3 · answered Oct 24 '18 at 17:56

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.

Same name of field in redux-form

3 Answers3