Pass a prop to redux

Question

I have the following code:

main.js

submit(v) {
    console.log(v);
    const price = v.get("price");
  }

render() {  
<form onSubmit={handleSubmit(this.submit)}>
    <Field
    name="products"
    categoryId={categoryId}
    component={MyComponent}
    />

    <MySubmitComponent
    confirm={handleSubmit(this.submit)}
    />
  </form>
}

MyComponent.js

{this.props.products.map((product, index) => (
<ProductDetails
productId={product.productId}
price={product.price}
/>
))}

ProductsDetails.js

    <Field
    name="price"
    price={price}
    component={PriceText}
    initialValues
    />

    const selector = formValueSelector("products");
    const mapStateToProps = (state, ownProps) => {
      return {
        initialValues: { productId: ownProps.productId },
        productId: selector(state, "productId")
      };
    };
    ProductsDetails= connect(mapStateToProps)(ProductsDetails);

When I change the price of a product and press submit, the variable values in the submit function contains only the new price of the product without its productId. I also need the productId to inform the appropriate product. What do I miss?

Answer 1

As far as I know and have used redux-form, one Field component will have only one value registered in the Store.

So you can approach it as having different multiple Forms, where each Form will have separate productId and price Fields. Once you submit the Form - you will have the both fields values.

Here's en example of creating multiple Forms.

According to your use case, it would be something like that:

Usage:

{ this.props.products.map(({ productId, price }, index) => (
  <Form form={`product-${productId}`} initialValues={{ productId, price }} />
/>
))}

<Form />:

const Form = reduxForm({
  // no need to put form again here as we are sending form props.
})(FormComponent);

<FormComponent /> - just the presentation component:

export const FormComponent = ({ handleSubmit }) => <form onSubmit={handleSubmit}>
  <Field
    name="price"
    component={PriceText}
  />
</form>

Answer 2

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
        activeIndex: 0
    };
    this.submit = this.submit.bind(this);
    this.goForward= this.goForward.bind(this);
  }

  submit(values) {
    console.log(values);
  }

  goForward() {
    let index = this.state.activeIndex;
    let productsSize = products.length - 1;

    if (index === productsSize) {
      index = -1;
    }

    ++index;

    this.setState({
      activeIndex: index
    });
  }

  render() {
      <form onSubmit={handleSubmit(this.submit)} name="edit">
          {this.props.products.map((product, index) => (
          <ProductDetails
          productId={product.productId}
          price={product.price}
          />
          ))}
    </form>
  }


let MyProductComponent = reduxForm({ form: "edit" })(
  MyComponent
);

const mapStateToProps = (state, ownProps) => {
  console.log(formValueSelector("edit")(
        state,
        "activeIndex");
  return {
    initialValues: {
      productId: formValueSelector("edit")(
        state,
        "activeIndex"
      )
    }
  };
};

MyProductComponent = withRouter(
  connect(mapStateToProps)(toJS(MyProductComponent))
);