QuestionsForm.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import { Input, ButtonInput } from 'react-bootstrap'
import { search, setCustomPhones, setCustomPhonesLocale } from '../actions/followUp'

class QuestionsForm extends Component {
  static propTypes = {
    questions: PropTypes.arrayOf(PropTypes.object).isRequired,
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    surveys: PropTypes.arrayOf(PropTypes.object)
  }

  conditionsFields () {
    const { fields: { conditions }, questions } = this.props
    return conditions.map((condition, index) => {
      return (
        <div key={index} className='col-lg-2 col-sm-3 col-md-3'>
          <Input type='select' {...condition.questionId}>
            <option value="''">Choose question...</option>
            { questions.map((question) => {
              return (<option value={question.id} key={question.id}>{question.text.en}</option>)
            }) }
          </Input>
          <Input type='text' {...condition.answer} placeholder='Answer text'/>
          <ButtonInput bsStyle='danger' onClick={() => { conditions.removeField(index) }}>Delete</ButtonInput>
        </div>
      )
    })
  }

  surveySelect () {
    const { surveys, fields: { surveyId } } = this.props

    return (
      <Input type='select' {...surveyId}>
        <option value="''">Choose survey...</option>
        { surveys.map(survey => {
          return (
            <option value={survey.id} key={survey.id}>{survey.title}</option>
          )
        }) }
      </Input>
    )
  }

  phonesField() {
    const { fields: { customPhones } } = this.props

    return (
      <Input type='text' {...customPhones} />
    )
  }

  phonesLocaleField() {
    const { fields: { customPhonesLocale } } = this.props

    return (
      <Input type='select' {...customPhonesLocale}>
        <option value="en">en</option>
        <option value="es">es</option>
      </Input>
    )
  }

  customPhonesOnlyRadioButton() {
    const { fields: { customPhonesOnly } } = this.props

    return (
      <Input {...customPhonesOnly} type='radio' label="Disable search"/>
    )
  }

  render () {
    const { fields: { conditions, optIn, userProfileIds }, handleSubmit } = this.props

    return (
      <form onSubmit={handleSubmit} className='col-lg-12'>
        <ButtonInput type='button' onClick={() => { conditions.addField() }}>Add condition</ButtonInput>
        <div className='row'>
          { this.conditionsFields() }
        </div>
        <div className='row'>
          <div className='col-lg-2 col-sm-3 col-md-3'>
            <Input {...userProfileIds} type='text' placeholder='Profile ids'/>
          </div>
        </div>

        <div className='row'>
          <div className='col-lg-2 col-sm-3 col-md-3'>
            { this.surveySelect() }
          </div>
        </div>
        <div className='row'>
          <div className='col-lg-2 col-sm-3 col-md-3'>
            { this.phonesField() }
            { this.phonesLocaleField() }
            { this.customPhonesOnlyRadioButton() }
          </div>
        </div>
        <div className='row'>
          <Input {...optIn} type='checkbox' label='Must be opted in?'/>
        </div>
        <ButtonInput type='submit'>Search</ButtonInput>
      </form>
    )
  }
}

const fields = [
  'conditions[].questionId',
  'conditions[].answer',
  'userProfileIds',
  'optIn',
  'surveyId',
  'customPhones',
  'customPhonesLocale',
  'customPhonesOnly'
]

function mapStateToProps (state) {
  return {
    questions: state.followUp.questions,
    surveys: state.followUp.surveys
  }
}

export default reduxForm({
  form: 'conditions',
  fields
}, () => ({ initialValues: { conditions: [{}], optIn: true } }), { onSubmit: search })(connect(mapStateToProps)(QuestionsForm))