Material-ui select fields and rendering lists based on the selected values

Question

I have a material-ui SelectField populated with MenuItems. My use case is that I would like to be able to select one of the values from the SelectField and then have it show in a list that generates below the field.

How would I go about starting to do this so that I can achieve my desired outcome?

Any help would be appreciated

Thanks for your time

I was thinking of taking the value of the selection from the select field and then putting that value in a ListItem to be displayed as part of a List. The problem comes with the fact that I might want to populate the list with more than value from the field. Keeping the old value after I update the value is what I am struggling with. There isn't really any code that I can show at the moment as I have only just finished designing the form itself (it has a lot of moving parts!). — BeeNag
– BeeNag, Commented May 5, 2016 at 16:10
so after select on of them items - that item should be added in list inside your state, right? what if the user selects twice the same item? — André Junges
– André Junges, Commented May 5, 2016 at 16:22
It will turn up once in the list. Ideally if you click on an item in the select field it will show in the list but you will also be able to remove it from the list if you don't want it to be there anymore before you submit the form — BeeNag
– BeeNag, Commented May 5, 2016 at 16:32

André Junges · Accepted Answer · 2016-05-05 16:49:03Z

2

So, from my understanding you just want to add the selected items inside a list and display item using the List and ListItem.

Consider:
options - your list of items (the ones displayed in the select field)
onChangeSelectField - SelectField onChange callback

//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>
}

answered May 5, 2016 at 16:49

André Junges

5,3673 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BeeNag Over a year ago

Hi Andre sorry I haven't gotten back to you very quickly, been stuck on a train for ages. I will get back to you once I have the chance to test your solution but this was along the lines of what I was thinking, I just couldn't sort it out in my head!

BeeNag Over a year ago

Tested and successfully works after a few tweaks to fit it in. Thanks again for your help!

BeeNag Over a year ago

How would I go about removing an item from the list?

André Junges Over a year ago

onRemoveItem(id) { this.setState({ selectedItems: this.state.selectedItems.filter(x => x.id !== id)}}

Nageshwar Reddy Pandem · Accepted Answer · 2016-05-06 06:21:49Z

I have done same concept in my project but used for different purpose

In my project, There is a card element with dropdown element. In card media, I used random image loader([lorempixel.com][1]) so i am changing the random image category in link http://lorempixel.com/500/400/[category] (Ex: http://lorempixel.com/500/400/nature) so it will update link and shows different category image on change of dropdown.

Below is how i updating the link on change of dropdown

onChange event is calling handleChange function

onChange={this.handleChange}

In handleChange function, I am updating the state

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

Here, I am updating the state

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

Here is the code i was written, Hope it will helps you. If u want any thing let me know

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;

Collectives™ on Stack Overflow

Material-ui select fields and rendering lists based on the selected values

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related