Redux-Form: Selecting form values from array of objects

Viewed 641

I'm trying to select form values from array and show them below the input section. I know how to do it with individual fields but arrays are confusing me.

Here I am rendering array of fields:

export const renderAddressFields = ({ fields, meta: { touched, error } }) => (   
   <View>
   {touched && error && <Text style={styles.ErrorMessage} >{error}</Text>}     
    {fields.map((ad, index) =>
      <View key={index}>        
        <Text>Address #{index + 1}</Text>
         <View style={styles.AddressFields}>
            <Field
              name={`${ad}.StreetName`}
              type="default"
              component={renderField}
              label="Street Name"/>
            <Field
              name={`${ad}.Number`}
              type="numeric"
              component={renderField}
              label="Street Number"/>
        </View>              
      </View>    
    )}    
    </View>  
)

And here is my (unsuccessful) attempt to select individual values from array of fields:

const { handleSubmit, mySubmit, fullAddress} = this.props

...

<Text>{fullAddress}</Text>

...

Form = reduxForm({
  form: 'registerForm',     // a unique identifier for this form
  validate,
})(withRouter(Form))

const selector = formValueSelector('registerForm') // <-- same as form name
Form = connect(
  state => {
    const { StreetName, Number } = selector(state, { Addresses: [{ StreetName: 'StreetName', Number: 'Number' }] })
    return {
      fullAddress: `${StreetName || ''} ${ Number || ''}`
    }
  }
)(Form)

export default Form
1 Answers
Related