React Js создать список параметров из массива

Question

Я пытаюсь создать параметры для моего выбора списка:

getMarkOptions: function() { 
    var options = this.props.renderProps; 

    return options.map(function (mark, i) { 
     return <option 
      key={i} 
      value={mark}> 
      {mark} 
     </option> 
    }); 
}, 


render: function() { 

    console.log('mark editor ' + this.props); 

    var selectedMark = this.props.value, 
     row = this.props.data, 
     highlightCurrentDay = this.props.highlight ? 'edit-select__currentDay':''; 
     return (   
      <select 
       value={selectedMark} 
       ref="selectMark" 
       className={"edit-select form-control " + highlightCurrentDay} 
       onChange={this.onChange} 
      > 
       {this.getMarkOptions()} 
      </select>  
     ); 
} 

данных:

var marks = [ 
     {"id": 1, "caption": "/", "code": "/", "meaning": "Present (AM)", "isStandardCode": true}, 
     {"id": 2, "caption": "\\", "code": "\\", "meaning": "Present (PM)", "isStandardCode": true}, 
     {"id": 3, "caption": "B", "code": "B", "meaning": "Educated off site", "isStandardCode": true}, 
     {"id": 4, "caption": "C", "code": "C", "meaning": "Other Authorised Circumstances", "isStandardCode": true}, 
     {"id": 5, "caption": "D", "code": "D", "meaning": "Dual registration", "isStandardCode": true} 
    ]; 

Я получаю сообщение об ошибке:

Необработанное Отказ Инвариантное Нарушение: объекты недействительны как ребенок Реагента (найдено: объект с ключами {id, caption, code, смысл, isStandardCode}). Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект с помощью createFragment (object) из надстроек React.

Может ли кто-нибудь помочь?

Answer 1

Инвариант указывает, что дочерний элемент в теге option является объектом - <option>{mark}</option> - но должен быть действительным дочерним, например. строка, INT, React компонент и т.д. - <option>{mark.meaning}</option>

Попробуйте что-то вроде этого:

return options.map(function (mark, i) { 
    return <option 
     key={mark.id} 
     value={mark.code}> 
     {mark.meaning} 
    </option> 
});