FieldArray re-registering fields after each char-input - reactjs

Question

Hi I'm quite new to React and I'm trying to learn how to work with redux-forms (https://redux-form.com/7.3.0/) and it mostly works, but I am encountering an issue which I cant solve. The issue is the same as this one: https://github.com/erikras/redux-form/issues/2412
The issue in short:
Whenever i try to write something in an input-field, my form constantly re-registers the field, which makes the form almost impossible to work with. The bad behavior happens because of validation of inputs.
Although Marnusw seems to have solved it with this comment:
<Field ... validate={[required, minLength(6)]}/>
Every time the form was rendered a new minLength instance would be
created which caused the field to UNREGISTER_FIELD and then
REGISTER_FIELD again.
The minLength instance should be created once outside of the render
function:
const minLength6 = minLength(6)
<Field ... validate={[required, minLength6]}/>
However I am not connecting my validation to the component like he is, so I am unsure of how I can declare my validation outside the render() function in my code.
I have tried doing:
...(imports)
const validation = validate //declaring a const and assigning 'validate' to it
//instead of directly using validate.
MenuInputFields = reduxForm({
form: 'inputItemList',
validation
})(MenuInputFields)
But this disabled validation alltogether, which (of course) also solves the problem, but this is not a solution, since I need to validate inputs.
My component:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field, FieldArray } from 'redux-form'
import { menuSelector } from '../reducers/menuViewReducer'
import { postMenuRequest } from '../sagas/adminMenuSaga'
import validate from './validateForm'
const mapDispatchToProps = (dispatch) => {
return {
submitForm: (newMenu) => dispatch(postMenuRequest(newMenu))
}
}
export class MenuInputFields extends React.Component {
constructor(props){
super(props)
}
render() {
let currentDate = new Date()
let formattedDate = currentDate.toLocaleDateString('en-GB')
const renderField = ({ input, label, type, className, meta: { touched, error } }) => (
<div>
<input {...input} type={type} placeholder={label} className={className} />
{touched && error && <span>{error}</span>}
</div>
);
const renderMenuItem = ({fields, meta: {touched, error, submitFailed }}) => (
<ul className='adminInputFoodItem'>
{fields.map((MenuItem, index) => (
<li key={index}>
<p className='col-md-1'> {index+1} - </p>
<Field
name={`${MenuItem}.FoodItem`}
type='text'
component={renderField}
label='Titel'
className='col-md-2'
/>
<Field
name={`${MenuItem}.Description`}
type='text'
component={renderField}
label='Beskrivelse'
className='col-md-6'
/>
<Field
name={`${MenuItem}.Price`}
type='number'
component={renderField}
label='Pris'
className='col-md-1'
/>
<button
type='button'
title='Fjern'
onClick={() => fields.remove(index)}
className='btn btn-default btn-xs remItemRow'
>Fjern
</button>
</li>
))}
<li>
</li>
<li>
<button
type='button'
onClick={() => fields.push({})}
className='btn btn-default btn-sm addItemRow'
>Tilføj
</button>
{submitFailed && error && <span>{error}</span>}
</li>
</ul>
);
const { handleSubmit, pristine, reset, submitting, submitForm } = this.props
return (
<form className='adminInputForm' onSubmit={handleSubmit(submitForm)}>
<label className='col-md-2' >Dato: {formattedDate}</label>
<br />
<br />
<ul className='adminInputFoodItem'>
<li>
<label className='col-md-1'> Lukketid: </label>
<Field
name='ClosingTime'
type='text'
component={renderField}
label='TT:mm'
className='col-md-1'
/>
</li>
</ul>
<hr />
<div>
<label className='col-md-1'> # </label>
<label className='col-md-2'> Titel </label>
<label className='col-md-3'> Beskrivelse </label>
<label className='col-md-1'> Pris </label>
</div>
<br />
<br />
<FieldArray name='MenuItems' component={renderMenuItem} />
<br />
<div className=''>
<button
className='btn btn-default'
type='submit'
disabled={pristine || submitting}
>Gem Menu
</button>
<label>Submit besked her</label>
</div>
</form>
)
}
}
MenuInputFields = reduxForm({
form: 'inputItemList',
validate,
})(MenuInputFields)
export default connect(mapStateToProps, mapDispatchToProps)(MenuInputFields)
validation.js
//regex patterns to match against
const timeFormat = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/
const specialCharsTextInput = /^[^|<>\"&]*$/
const emptyTextInput = /^$/
//Error texts
const requiredErrText = 'Required'
const timeErrText = ' - Forkert input - Format: TT:MM'
const noItemsErrText = { _error: 'Tilføj mindst 1 menu' }
const validate = values => {
const errors = {}
if (!values.ClosingTime || emptyTextInput.test(values.ClosingTime)) {
errors.ClosingTime = requiredErrText
}
if(values.ClosingTime && !timeFormat.test(values.ClosingTime)){
errors.ClosingTime = timeErrText
}
if (!values.MenuItems || !values.MenuItems.length) {
errors.MenuItems = noItemsErrText
} else {
const MenuItemsArrayErrors = []
values.MenuItems.forEach((MenuItem, MenuItemIndex) => {
const MenuItemErrors = {}
if (!MenuItem || !MenuItem.FoodItem || !specialCharsTextInput.test(MenuItem.FoodItem) || !emptyTextInput.test(MenuItem.FoodItem)) {
MenuItemErrors.FoodItem = requiredErrText
MenuItemsArrayErrors[MenuItemIndex] = MenuItemErrors
} else if (!MenuItem || !MenuItem.Description || !specialCharsTextInput.test(MenuItem.Description) || !emptyTextInput.test(MenuItem.Description)) {
MenuItemErrors.Description = requiredErrText
MenuItemsArrayErrors[MenuItemIndex] = MenuItemErrors
} else if (!MenuItem || !MenuItem.Price || !specialCharsTextInput.test(MenuItem.Price) || !emptyTextInput.test(MenuItem.Price)) {
MenuItemErrors.Price = requiredErrText
MenuItemsArrayErrors[MenuItemIndex] = MenuItemErrors
}
})
if (MenuItemsArrayErrors.length) {
errors.MenuItems = MenuItemsArrayErrors
}
}
return errors
}
export default validate