Agfdhyk

I am quite new to ReactJS and Redux. I am trying to achieve a complex dynamic form using reactjs and redux-form. Short story:

I need to dynamically generate forms that allows multiple answers having multiple types. More ore less how google forms are working.

Basically a user can create his own form/questionnaire. Example:

Have you ever visited New York ? (radio -> Yes/Now)

If user clicks on Yes, render another question set:

How much time did you spent visiting ? (checkbox input: 1-2 hours, 2-4hours, 4-6hours)

If user click on "4-6hours", render another question:

Wow! Can you tell us where exactly you spend so much time ? (text input answer)

And so on. Of course this is just a basic example, the forms would be even more complex than this.

Now, getting to the code. My initial approach was to use FieldArray. This is how it looks:

  <FieldArray 

    name="question" 

    component={renderMultipleCheckboxes} 

    options={[{id:1,value:true,label:'a'},{id:2,value:true,label:'b'}]}

    allowAnswer={true}

    allowAnswerForValue={[2]}

    allowAnswerFieldName="question_answer"

    allowAnswerFieldLabel="Your answer"

  />

This FieldArray is part of a big form exported as:

Form.propTypes = {

  user: PropTypes.object.isRequired

}



Form = reduxForm({

  form: 'form_x',

})(Form);



Form = connect(state => ({

  account: state.account,

}))(Form);



export default Form;

renderMultipleCheckboxes component:

export class renderMultipleCheckboxes extends React.PureComponent {



  render() {

    const {   

      input,

      fields, 

      options, 

      meta: { error, submitFailed }, 

      allowAnswer,

      allowAnswerForValue,

      allowAnswerFieldName,

      allowAnswerFieldLabel 

    } = this.props;



    return fields.map((item, index) => { 



      let option = options.map((item) => {

        if (item.id === index) {

          return item;

        }

      })



      // What would be the approach to show answer input ? This line of code works only once.  

      let showAnswerField = document.getElementsByName(item)[0].checked && allowAnswer && allowAnswerForValue.indexOf(index) > -1;



      return (

        <React.Fragment>

          <Field

            label={option[index].label}

            name={`${item}`}

            component={renderCheckBoxField}

            key={index}

          />

          {showAnswerField &&

            <Field

              label={allowAnswerFieldLabel}

              name={allowAnswerFieldName}

              component={'input'}

              key={index + 1}

            />

          }

        </React.Fragment>

      )

    })

  }

}

renderCheckBoxField component:

class CheckBoxField extends PureComponent {

  componentDidMount() {

    this.props.onChange(this.props.defaultChecked);

  }



  render() {

    const disabled = this.props.disabled;



    return (

      <label

        className={`checkbox-btn${disabled ? ' disabled' : ''}${this.props.class ? ` checkbox-btn--${this.props.class}` : ''}`}>

        <input className='checkbox-btn__checkbox'

               type='checkbox' name={this.props.name} onChange={this.props.onChange}

               checked={this.props.value} disabled={disabled}/>

        <span className='checkbox-btn__checkbox-custom'

              style={this.props.color ? {background: this.props.color, borderColor: this.props.color} : {}}>

            <CheckIcon/>

          </span>

        {this.props.class === 'button' ?

          <span className='checkbox-btn__label-svg'>

              <CheckIcon className='checkbox-btn__label-check'/>

              <CloseIcon className='checkbox-btn__label-uncheck'/>

            </span> : ''}

        <span className='checkbox-btn__label'>

          {this.props.label}

          </span>

      </label>

    )

  }

}



const renderCheckBoxField = (props) => {

  let label = props.label;

  return (

  <CheckBoxField

    {...props.input}

    label={label}

    defaultChecked={props.defaultChecked}

    disabled={props.disabled}

    class={props.class}

    color={props.color}

  />

)};



renderCheckBoxField.propTypes = {

  input: PropTypes.object.isRequired,

  label: PropTypes.string,

  defaultChecked: PropTypes.bool,

  disabled: PropTypes.bool,

  class: PropTypes.string,

  color: PropTypes.string

};



export default renderCheckBoxField;

I am not sure if i explained myself good enough.

IMPORTANT: I can not use formValues because form fields are generated dynamically. Or at least I don't know how to achieve this.