[material-ui],[redux-from] Select with dynamic options

Question

I request data from the backend. The data is the gift data and the person data.

My goal is to realize connect the gift and the person. Each person takes a gift.

I use the material-ui and the redux-form package.

The person data tree is like:

persons: "
        [ {
            name:'person1_name',
            userID:'person1_userID',
            hobbies: persondata -> the same to persons  
           },
           {
            name:'person2_name',
            userID:'person2_userID',
            hobbies: persondata -> the same to persons  
           }, 
           {
            name:'person3_name',
            userID:'person3_userID',
            hobbies: persondata -> the same to persons  
           }
          ]

I want to get this result: I click the select, 3 (if the backend person data is 3 persons) person item(option) is showed.

I use the redux state state.sendGood.driftMemberArray.formData to save person data.

My code is below:

import React from 'react'
import {Field, FieldArray, reduxForm } from 'redux-form'
import { connect }   from 'react-redux'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'

const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
    <SelectField
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        onChange={(event, index, value) => input.onChange(value)}
        children={children}
        {...custom}/>
)

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
    <ul>
      {fields.map((member, index) =>
          <li key={index}>
            <Field name={`${member}.selectMan`} component={renderSelectField} label="select a man">
              {member.hobbies.map( (item,keyIndex) =>
                 <MenuItem  key={keyIndex} value={keyIndex} primaryText='hahah'/>
              )}
            </Field>
          </li>
      )}
    </ul>
)


let NextWeekDriftForm = (props) => {
  const { handleSubmit, pristine, reset, submitting} = props;
  return (
      <form onSubmit={handleSubmit}>
        <div>
          <FieldArray name="members"component={renderMembers}/>
        </div>
      </form>
  )
}

NextWeekDriftForm =  reduxForm({
  form: 'NextWeekDriftForm',     // a unique identifier for this form
  enableReinitialize: true,
})(NextWeekDriftForm)

export default NextWeekDriftForm =  connect(
    state => ({
      initialValues:state.sendGood.driftMemberArray.formData,
    })
) (NextWeekDriftForm)

As a result, the error show:

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

{member.hobbies.map( (item,keyIndex) => <MenuItem key={keyIndex} value={keyIndex} primaryText='hahah'/>

My problem is probably in this code.

I use the

  <MenuItem  value='09090' primaryText='hahah'/>
  <MenuItem  value='09090' primaryText='hahah'/>
  <MenuItem  value='09090' primaryText='hahah'/>

replace the code

 {member.hobbies.map( (item,keyIndex) =>
                     <MenuItem  key={keyIndex} value={keyIndex} primaryText='hahah'/>

The browser renders well.

I want to realize dynamic options of the select.

Anyway, can realize my goal is OK. If you don't understand this problem after you have been read my description. I will edit this problem again.

Answer 1

When the app load the member.hobbies problably is not defined yet. Try to declare a variable to set this array as null if is not defined:

const hobbies = member.hobbies || []

and then:

{hobbies.map( (item,keyIndex) =>
                 <MenuItem  key={keyIndex} value={keyIndex} primaryText='hahah'/>