Redux-form Dynamically insert objects into FieldArray property `field`
What I am trying to accomplish is a dynamic FieldArray, similar to the one given in the example of the reduction form , but the difference is that every object I add to the list already all the properties (which I have to display), but the one that I need to calculate from the other two of them.
Take a look at this example:
import React from 'react'
import { compose } from 'redux';
import { connect } from 'react-redux';
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
const renderSelect = (products) => (
<div>
<label>Select Product to Add</label>
<div>
<Field name="products" component="select">
<option></option>
{products.map(p => <option value={p.id}>{p.name}</option>)}
</Field>
</div>
</div>
);
const renderCompetences = ({ fields, meta: { touched, error, submitFailed }}) => {
return (
<div>
{/* <div>
<button type="button" onClick={() => fields.push({})}>Add Competence</button>
{(touched || submitFailed) && error && <span>{error}</span>}
</div> */}
<ul>
{fields.map((competence, index) =>
<li key={index}>
<h4>Competence #{index + 1}</h4>
<Field
name={`${competence}.singlePrice`}
type="number"
component={renderField}
label="Single Price"/>
<Field
name={`${competence}.standardQuantity`}
type="number"
component={renderField}
label="Standard Quantity"/>
<Field
name={`${competence}.totalPrice`}
type="number"
component={renderField}
label="Total Price"/>
<button
type="button"
onClick={() => fields.remove(index)}
style={{color: 'red'}}
>
✘
</button>
</li>
)}
</ul>
</div>
);
}
const FieldArraysForm = (props) => {
const { handleSubmit, pristine, reset, submitting, products, productsValue } = props;
return (
<form onSubmit={handleSubmit}>
<Field name="recipientName" type="text" component={renderField} label="Recipient Name"/>
<FieldArray name="competences" component={renderCompetences} />
{renderSelect(products)}
<div>
<button type="submit" disabled={submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
const selector = formValueSelector('fieldArrays');
const mapStateToProps = (state) => {
const productsValue = selector(state, 'products');
return { productsValue };
};
export default compose(
connect(mapStateToProps),
reduxForm({
form: 'fieldArrays'
})
)(FieldArraysForm);
I have to display the products that I have selected from a list in my unordered list and every time I select a new item I have to add it to the list.
You can see an example of an array of products here:
const products = [
{ id: '0', name: 'Product One', singlePrice: 101, standardQuantity: 1},
{ id: '1', name: 'Product Two', singlePrice: 39, standardQuantity: 6},
{ id: '2', name: 'Product Three', singlePrice: 85, standardQuantity: 4},
{ id: '3', name: 'Product Four', singlePrice: 1, standardQuantity: 20}
];
Here is a working example for testing some solutions: https://www.webpackbin.com/bins/-Kecgj77Gbxo_4am3WS1
Thank you so much for any help you can give!
+3
source to share
1 answer
This is the solution I came across:
import React from 'react'
import { compose } from 'redux';
import { connect } from 'react-redux';
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
const renderCalcField = ({ input, label, type, meta: { touched, error }, calc }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} value={calc()} />
{touched && error && <span>{error}</span>}
</div>
</div>
)
const renderCompetences = ({ fields, meta: { touched, error, submitFailed }, products, productSelectValue }) => {
return (
<div>
<ul>
{fields.map((competence, index) =>
<li key={index}>
<h4>Competence #{index + 1}</h4>
<Field
name={`${competence}.singlePrice`}
type="number"
component={renderField}
label="Single Price"
onChange={() => {
const current = fields.get(index);
current.totalPrice = current.singlePrice * current.standardQuantity;
fields.remove(index);
fields.insert(index, current);
}}
/>
<Field
name={`${competence}.standardQuantity`}
type="number"
component={renderField}
label="Standard Quantity"
/>
<Field
name={`${competence}.totalPrice`}
type="number"
component={renderCalcField}
props={{calc: () => {
const current = fields.get(index);
return current.singlePrice * current.standardQuantity;
}}}
label="Total Price"
/>
<button
type="button"
onClick={() => fields.remove(index)}
style={{color: 'red'}}
>
✘
</button>
</li>
)}
</ul>
<div>
<Field name="productSelect" component="select">
<option>Select product</option>
{products.map(p => <option value={p.id}>{p.name}</option>)}
</Field>
<button type="button" onClick={() => {
const selectedProduct = products.find(p => p.id === productSelectValue);
fields.push(selectedProduct);
}}>Add</button>
{(touched || submitFailed) && error && <span>{error}</span>}
</div>
</div>
);
}
const FieldArraysForm = (props) => {
const { handleSubmit, pristine, reset, submitting, products, productSelectValue } = props;
return (
<form onSubmit={handleSubmit}>
<Field name="recipientName" type="text" component={renderField} label="Recipient Name"/>
<FieldArray name="competences" component={renderCompetences} props={{products, productSelectValue}}/>
<div>
<button type="submit" disabled={submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
const selector = formValueSelector('fieldArrays');
const mapStateToProps = (state) => {
const productSelectValue = selector(state, 'productSelect');
return { productSelectValue };
};
export default compose(
connect(mapStateToProps),
reduxForm({
form: 'fieldArrays'
})
)(FieldArraysForm);
works here on webpackbin (sometimes it has loading issues, but that doesn't depend on my example)
0
source to share