MenuItem со значением Dynami c не работает в UI React материала

Question

Я использую Select, в интерфейсе материалов для React, я всегда получаю неопределенное значение, когда выбираю из селектора. Это всегда происходит, когда мы используем MenuItem значение Dynami c. Но если я использую значение stati c вместо динамического c, это работает хорошо. Но я должен использовать динамически c способ с оператором .map.

Пожалуйста, предоставьте решение, которое хорошо работает в значении Dynami c.

Вот так -> <MenuItem value={SOME-DYNAMIC-VALUE} />

this.state.selectedTagetIdentity = '';

onTargetIdentityChange = (event) => {
  this.setState({ selectedTagetIdentity: event.target.value }); // its undefined always 
}

const splitedIdenties = { 
 'abc1' :[{ id: 12, age: '2' },{ id: 13, age: '3' }], 
 'abc2': [{ id: 14, age: '22' },{ id: 15, age: '25' }] 
};

<Select value={selectedTagetIdentity} onChange={onTargetIdentityChange}>
  {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) => 
    <div key={identityTypeIndex}>
      <ListSubheader>{identityTypeKey}</ListSubheader>
      {splitedIdenties[identityTypeKey].map(identity => 
        <MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>
        )}
    </div>
  )}
</Select>

См. здесь это не работает

Answer 1

Проблема в том, что вы упаковываете MenuItem с div. MenuItem элементы должны быть прямыми потомками material-ui Select:

elements Элементы MenuItem должны быть прямыми потомками, когда native имеет значение false.

Чтобы исправить это, удалите упаковочный div:

<Select value={personName} onChange={onTargetIdentityChange}>
    {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>{
    let children = [];

    children.push(<ListSubheader>{identityTypeKey}</ListSubheader>); 
      splitedIdenties[identityTypeKey].forEach(identity => {
        children.push(<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>)
      })

      return children;
    }
  )}
</Select>