Redux Form - the properties "form = {}" and "initialValues ​​= {}" that are not recognized with multiple forms (redux-form v7.0.4)

Question

I create several forms inside one component and initialize them using redux repository. I define the "form name" in <form>, unlike the reduxForm () helper that was registered here ...

How to insert the same reduction form several times on the page?

I create forms from the "listing" object and pass it to my components using mapStateToProps (). I try to set the initial values ​​of the form using 'initialValues ​​= {}', but the Redux Form produces the following errors and asks to declare the form in the reduxForm () helper ...

1) Invalid type prop: prop is formmarked as required in Form(ItemInfo), but its value undefined.

2) Unknown scrolling initialValuesby tag. Remove this support from the element.

And this is similar to the problem mentioned here ...

https://github.com/erikras/redux-form/issues/28

import _ from 'lodash';
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../../actions';
import {Col} from 'react-grid-system';
import RaisedButton from 'material-ui/RaisedButton';

class ItemInfo extends Component {

  renderSingleItem(item){
    let theItem =  _.map(_.omit(item, '_id'), (value,field) => {
        return (
          <div key={field}>
            <label>{field}</label>
            <Field component="input" type="text" name={field} style={{ marginBottom: '5px' }} />
            <div className="red-text" style={{ marginBottom: '20px' }}>
            </div>
          </div>
        );
      });
    return theItem || <div></div>;
  }

  renderItemInfo() {

      if (this.props.listing.listing !== undefined) {
        let theItems = _.map(this.props.listing.listing.items, item => {                
            return (
                <Col key={item._id} md={3}>
                  <form form={`editItemInfo_${item._id}`} initialValues={item}>
                    {this.renderSingleItem(item)}
                    <RaisedButton secondary={true} label="Remove Item"/>
                    <RaisedButton primary={true} label="Update Item"/>
                  </form>
                </Col>
            );
        });
        return theItems || <div></div>;
      }

  }

  render() {
    return (
        <div className="row">
            {this.renderItemInfo()}
        </div>
    );
  }
}

function mapStateToProps({listing}) {
  return { listing };
}

ItemInfo = reduxForm({
  fields: ["text"],
  enableReinitialize: true
})(ItemInfo)

ItemInfo = connect(mapStateToProps,actions)(ItemInfo)

export default ItemInfo

This is an example of a "listing" returned object ...

{ _id: 59b5eebd33a3a833b6ac1386,
  _user: 59aff09a11011f0cfd8d7666,
  location: 'nother',
  availability: 'jhkvljh',
  price: 9860,
  __v: 0,
  items:
   [ { equipmentType: 'kbj;kj',
       make: ';jb',
       model: ';;jb',
       watts: 9860,
       bulb: 'kjbkj',
       condition: 'kjbkjb',
       _id: 59b5eebd33a3a833b6ac1387 },
     { condition: 'houy',
       bulb: 'jhg',
       watts: 8907,
       model: 'mode',
       make: 'maker',
       equipmentType: 'smoquip',
       _id: 59b5f9cf13b37234ed033a75 } ] }

Thank you for your help!

Answer 1

I finally found out that with a little hack. It seems like this is one part of the error with the Redux form and one part of the error with my initial implementation.


Correct implementation

@erikras, Redu Form... https://github.com/erikras/redux-form/issues/28

, jsx <form> . ...

 renderItemForms() {
    if (this.props.listing.listing !== undefined) {
      return _.map(this.props.listing.listing.items, item => {
          return (
            <ItemInfo form={`editItemInfo_${item._id}`} initialValues={item} key={item._id} item={item} /> 
          );
      });
    }
  }

Redux

redux, " : ", . , , , "form" reduxForm, ...

ItemInfo = reduxForm({
  form: 'any random string here',
  fields: ["text"],
  enableReinitialize: true
})(ItemInfo)

'initialValues' " ", Redux dev , in-line reducexForm ( ) . redux "/ "...

, - . , , Redux/React noob, - , .