Material-ui выбирает поля и списки рендеринга на основе выбранных значений

Итак, насколько я понимаю, вы просто хотите добавить выбранные элементы в список и отобразить элемент, используя List и ListItem.

Рассмотрим:
параметры - ваш список элементов (отображаемых в поле выбора)
onChangeSelectField - SelectField обратный вызов onChange

//You could store the item`s ids inside an array. Ex:
onChangeSelectField(event, index, value) {
  this.setState({
    selectedItem: value,
    selectedItems: this.state.selectedItems.concat(value) 
  })
}

//And inside the render function
render() {
  <List>
    {this.state.selectedItems.map((itemID) => {
      var item = this.state.options.find(x => x.id === itemID)

      return (
        <ListItem primaryText={item.text} />
      )
    })}
  </List>
} 

Я использовал ту же концепцию в своем проекте, но использовал ее для разных целей

В моем проекте есть элемент карты с элементом раскрывающегося списка. В карточных носителях я использовал random image loader([lorempixel.com][1]), поэтому я изменяю категорию случайных изображений в ссылке http://lorempixel.com/500/400/[category] (Пример: http://lorempixel.com/500/400/nature), чтобы она обновляла ссылку и показывала другое изображение категории при изменении раскрывающегося списка.

Ниже показано, как я обновляю ссылку при изменении раскрывающегося списка.

Событие onChange вызывает функцию handleChange

onChange={this.handleChange}

В функции handleChange я обновляю состояние

this.setState({
  text: event.nativeEvent.target.innerText,
  value: value
});

Здесь я обновляю состояние

<img src={"http://lorempixel.com/500/400/"+this.state.text} />

Вот код, который я написал. Надеюсь, он вам поможет. Если хочешь чего-нибудь, дай мне знать

import React from "react";

import Card from "material-ui/Card";
import CardActions from "material-ui/Card/CardActions";
import CardTitle from "material-ui/Card/CardTitle";
import CardHeader from "material-ui/Card/CardHeader";
import CardMedia from "material-ui/Card/CardMedia";
import CardText from "material-ui/Card/CardText";

import Drawer from "material-ui/Drawer";
import DropDownMenu from "material-ui/DropDownMenu";
import IconMenu from "material-ui/IconMenu";
import IconButton from "material-ui/IconButton";
import Menu from "material-ui/Menu";
import MenuItem from "material-ui/MenuItem";

import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";

const styles = {
  margin: {
    margin: "20px 300px"
  },
  float: {
    float: "right"
  },
};

class About extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      text: "nature",
      value: 3
    };
  }

  handleChange(event, index, value){
    this.setState({
      text: event.nativeEvent.target.innerText,
      value: value
    });
  }

  render(){
    const IconMenuRight = (
      <DropDownMenu
        style={styles.float}
        value={this.state.value}
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        onChange={this.handleChange}>
          <MenuItem value={1}>sports</MenuItem>
          <MenuItem value={2} primaryText="city" />
          <MenuItem value={3} primaryText="nature" />
          <MenuItem value={4} primaryText="animals" />
          <MenuItem value={5} primaryText="abstract" />
          <MenuItem value={6} primaryText="cats" />
          <MenuItem value={7} primaryText="food" />
          <MenuItem value={8} primaryText="nightlife" />
          <MenuItem value={9} primaryText="people" />
          <MenuItem value={10} primaryText="technics" />
          <MenuItem value={11} primaryText="transport" />
      </DropDownMenu>
    )
    return(
      <Card style={styles.margin}>
        <CardHeader
          avatar="http://lorempixel.com/400/200/people"
          title="http://lorempixel.com/"
          subtitle="A random image loader. Change the drop down value to see the diffent category image.">
          {IconMenuRight}
        </CardHeader>
        <CardMedia>
          <img src={"http://lorempixel.com/500/400/"+this.state.text} />
        </CardMedia>
        <CardTitle
          title={"React js"}
          subtitle="React is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it."/>
        <CardText>
          Webdesign or Print. Its simple and absolutely free! Just put the custom url in your code like this:
          to get your FPO / dummy image.
        </CardText>
      </Card>
    )
  }
}

export default About;