logo
down
shadow

how to limit redux-form's fieldArray field.push to 3


how to limit redux-form's fieldArray field.push to 3

By : Rasel Ahmed
Date : October 18 2020, 01:08 AM
like below fixes the issue how to limit redux-form's fieldArray field.push Should max out at three. Using redux-from example version 6.8.0 , You can pass the handler conditionally:
code :
onClick={() => fields.length <= 3 && fields.push({})}


Share : facebook icon twitter icon
How to get Field value and pass it to FieldArray value with Push event? Redux-Form V6-RC3

How to get Field value and pass it to FieldArray value with Push event? Redux-Form V6-RC3


By : rwb97
Date : March 29 2020, 07:55 AM
To fix the issue you can do You can use the arrayPush() action creator. Then all you'll need to figure out is how to get dispatch or to pre-bind the action creator in mapDispatchToProps.
code :
import { arrayPush } from 'redux-form'

@connect(
  mapStateToProps,
  { arrayPush }
)
class MyForm extends Component {

  ...

  handleAddClick(phone) {
    this.props.arrayPush('myForm', 'phones', phone)
  }

  ...
}
Redux-form: How can I get the value of a name property passed into a Field via FieldArray?

Redux-form: How can I get the value of a name property passed into a Field via FieldArray?


By : muliana
Date : March 29 2020, 07:55 AM
Hope this helps The answer appears to be nested Fields:
{ return (
{props.input.value}
) }}/> } />
redux-form Dinamically inject objects into FieldArray `field` property

redux-form Dinamically inject objects into FieldArray `field` property


By : Nelson Jovial
Date : March 29 2020, 07:55 AM
wish helps you What I am trying to accomplish is a dynamic FieldArray similar to the one in the redux form example but the difference is that every object I am adding to the list already has all properties (which i have to display) but one that I need to calculate from other two of them. , This is the solution i came up with:
code :
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);
Giving a default value to redux-form Field in a FieldArray when adding new Fields

Giving a default value to redux-form Field in a FieldArray when adding new Fields


By : rczsf_2013
Date : March 29 2020, 07:55 AM
Hope that helps You can pass the initial value when you push the new entry to your array. Given the example in the redux-form documentation:
code :

const renderSubFields = (member, index, fields) => (
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => fields.remove(index)}
    />
    <h4>Member #{index + 1}</h4>
    <Field
      name={`${member}.firstName`}
      type="text"
      component={renderField}
      label="First Name"
    />
    <Field
      name={`${member}.lastName`}
      type="text"
      component={renderField}
      label="Last Name"
    />
  </li>
)
const renderMembers = ({ fields }) => (
  <ul>
    <button type="button" onClick={() => fields.push({ firstname: 'field 1 firstname', lastname: 'field 1 lastname' })}>
      Add Member
    </button>
    {fields.map(renderSubFields)}
  </ul>
)
How do I use types defined by @types/redux-form in React component with Field and FieldArray?

How do I use types defined by @types/redux-form in React component with Field and FieldArray?


By : Pamela Zambrano
Date : March 29 2020, 07:55 AM
Hope that helps I found the solution. I'm leaving the answer in case anyone had the same problem as me.
code :
import * as React from 'react';
import { Field, FieldArray, reduxForm, WrappedFieldProps, WrappedFieldArrayProps, InjectedFormProps, GenericFieldArray } from 'redux-form';
import validate from './validate';

interface CustomFieldProps {
  type?: string;
}

const FieldArrayCustom = FieldArray as new () => GenericFieldArray<Field, any>;

const renderField = (props: WrappedFieldProps & CustomFieldProps) => {
  const { touched, error } = props.meta;
  const { input, label, type } = props;

  return (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} type={type} placeholder={label} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  )
}

const renderHobbies = (props: WrappedFieldArrayProps<undefined>) => {
  const { fields } = props;
  const { error } = props.meta;

  return (
    <ul>
      <li>
        <button type="button" onClick={() => fields.push(undefined)}>
          Add Hobby
        </button>
      </li>
      {fields.map((hobby, index) => (
        <li key={index}>
          <button
            type="button"
            title="Remove Hobby"
            onClick={() => fields.remove(index)}
          />
          <Field
            name={hobby}
            type="text"
            component={renderField}
            label={`Hobby #${index + 1}`}
          />
        </li>
      ))}
      {error && <li className="error">{error}</li>}
    </ul>
  )
}

const renderMembers = (props: WrappedFieldArrayProps<{}>) => {
  const { fields } = props;
  const { error, submitFailed } = props.meta;

  return (
    <ul>
      <li>
        <button type="button" onClick={() => fields.push({})}>
          Add Member
        </button>
        {submitFailed && error && <span>{error}</span>}
      </li>
      {fields.map((member, index) => (
        <li key={index}>
          <button
            type="button"
            title="Remove Member"
            onClick={() => fields.remove(index)}
          />
          <h4>Member #{index + 1}</h4>
          <Field
            name={`${member}.firstName`}
            type="text"
            component={renderField}
            label="First Name"
          />
          <Field
            name={`${member}.lastName`}
            type="text"
            component={renderField}
            label="Last Name"
          />
          <FieldArrayCustom name={`${member}.hobbies`} component={renderHobbies} />
        </li>
      ))}
    </ul>
  )
}

const FieldArraysForm = (props: InjectedFormProps) => {
  const { handleSubmit, pristine, reset, submitting } = props

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="clubName"
        type="text"
        component={renderField}
        label="Club Name"
      />
      <FieldArrayCustom name="members" component={renderMembers} />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldArrays', // a unique identifier for this form
  validate
})(FieldArraysForm)
Related Posts Related Posts :
  • rror: FactoryMethod.render(): A valid React element (or null) must be returned.
  • How to pass a function instead of string as a prop to a component
  • what is wrong with 'this.setState'
  • Use ref to invoke instance methods
  • How to keep two separate categories under the same list, but keep other categories separated per se?
  • Stateless function components cannot hav refs
  • Update array object in React Redux reducer
  • PropTypes React Native is not an object
  • Jest test fail: SyntaxError: Unexpected token <
  • React Redux form and connect syntax
  • Can anyone provide an example on React-Redux Jest testing?
  • React server side renderer omits setState callback function?
  • Bootstrap Checkbox Not Toggling
  • distorted map image when using react-leaflet
  • react-scripts Invalid Host header
  • remove text from button that created in loop
  • Referencing state for loop rendered elements in react
  • React Native update multidimensional state value on switch press
  • Draft.js - How to trim contents
  • how to syncState to firebase with re-base?
  • React component test with enzyme
  • Under what circumstances React class component will be constructed many times?
  • react-native 0.49 brackets after base class
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com