form & initialValues properties not recognized with multiple forms in one component (redux-form v7.0.4)

Viewed 2922

I'm creating multiple forms within a single component and to initialize them with the redux store I'm defining the form's name attribute in the<form> element, as opposed to within the reduxForm() helper, which was documented here...

How to embed the same redux-form multiple times on a page?

I'm creating the forms from the 'listing' object and passing it to my components with mapStateToProps(). I'm trying to set the initial values of the form with initialValues={}, but Redux Form is producing the following errors and is asking for the form to be declared in the reduxForm() helper...

1) Failed prop type: The prop form is marked as required in Form(ItemInfo), but its value is undefined.

2) Unknown prop initialValues on tag. Remove this prop from the element.

And this appears to be similar to the issue 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 the 'listing' object being returned...

{ _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 } ] }

Thanks for your help!

1 Answers
Related