I'm trying to execute a very simple example with ReduxForm and I have two functions before the render, but one of the functions call another as a component props, but then it is undefined. I tried to bind the this but it still dont recognise it.
Here is my code:
import React, { Component } from 'react'
import { Field, FieldArray, reduxForm } from 'redux-form'
class Page4 extends Component {
constructor(props) {
super(props)
this.simpleField.bind(this)
}
simpleField(field) {
const { meta } = field
return (
<div className='form-group'>
<label>{field.label}</label>
<input
className='form-control'
{...field.input}
/>
</div>
)
}
// This function cannot reach the simpleField component
myFields(field) {
let optiosArray = [
{'label':'Option 1', 'value':'1'},
{'label':'Option 2', 'value':'2'}
]
return(
optionsArray.map((option, key) => {
<Field
label= {option.label}
value= {option.value}
name={option.value}
component={this.simpleField}
/>
})
)
}
render() {
return (
<div>
<FieldArray
name='test'
label='label'
component={this.myFields}
/>
</div>
)
}
}
const validate = (value) => {
const errors = ''
return errors
}
export default reduxForm({
validate,
form: 'Page4'
})(Page4)
To access this.simpleFields
, binding the this.myFields
in the constructor is good enough.
constructor(props) {
super(props)
this.myFields = this.myFields.bind(this)
}
this.myFields = this.myFields.bind(this)
I think you are using the FieldArray incorrectly. I've modified the code so that it will give you an idea on how FieldArray should be used. Working jsFiddle here - https://jsfiddle.net/sherin81/4u3hk7kg/
class Page4 extends Component {
constructor(props) {
super(props)
this.myFields = this.myFields.bind(this)
}
simpleField = (field) => {
const { input: { value } } = field
return (
<div className='form-group'>
<input type="text" name={field.input.name} onChange={field.input.onChange} value={value} />
</div>
)
}
myFields({ fields }) {
return (<div>{fields.map((option, key) => {
return (<div key={key}>
<Field
name={option}
component={this.simpleField}
/>
</div>)
})}</div>)
}
render() {
return (
<div>
<FieldArray
name='listOfTextFields'
component={this.myFields}
/>
</div>
)
}
}
const validate = (value) => {
const errors = ''
return errors
}
const MyTextFields = reduxForm({
validate,
form: 'Page4'
})(Page4)
And when calling the component, you should do the following.
<MyTextFields initialValues={{ listOfTextFields: [ 'Text 1','Text 2' ] }}/>