CODEWITHSUNDEEP
reactjsmaterial-ui
Kimaya
Kimaya

Reputation: 1420

Select with chip input not displaying the selected value

I have a Select and the inputs are in Chip Format. I tried console log of the value selected and it is getting it fine. But for some reason, it does not get displayed on the select box. What am I doing wrong here?

 handleChange = event => {
    this.setState({ badge : event.target.value });
  };

 const chipOptions = [
      {key: 1, 'text': 'text1',  'value': 'text1'},
      {key: 2, 'text':'text2', 'value':'text2'},
      {key: 3, 'text':'text3', 'value':'text3'}
    ]

<FormControl className={classes.formControl}>
            <Select
              value={this.state.badge}
              onChange={this.handleChange}
              inputProps={{
                name: 'badge',
                id: 'badge-simple',
              }}
            >
            {chipOptions && chipOptions.map(option=> (
              <Chip key={option.value} label={option.value} className={classes.chip} value={option.value} />
            ))}

          </Select>
        </FormControl>

Upvotes: 2

Views: 2613

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

The default manner in which Select renders the selected value is to render its children. In the Select source code as it is looping through the children of the Select, it does the following:

        selected = areEqualValues(value, child.props.value);
        if (selected && computeDisplay) {
          displaySingle = child.props.children;
        }

This is based on the assumption of the Select having MenuItem children. For instance, in the following example the first MenuItem would be selected and that MenuItem's children would be the text "Item 1":

<Select value={1}>
   <MenuItem value={1}>Item 1</MenuItem>
   <MenuItem value={2}>Item 2</MenuItem>
</Select>

Your Chips don't have children, so nothing is displayed. You can customize this behavior by specifying the renderValue property on Select. This is a function that receives the value and can decide what to render.

The following example shows using the renderValue prop to render a Chip:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import FormControl from "@material-ui/core/FormControl";
import Chip from "@material-ui/core/Chip";
import Select from "@material-ui/core/Select";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});
const chipOptions = [
  { key: 1, text: "text1", value: "text1" },
  { key: 2, text: "text2", value: "text2" },
  { key: 3, text: "text3", value: "text3" }
];

function App({ classes }) {
  const [value, setValue] = useState("text1");
  const renderChip = value => {
    return <Chip label={value} className={classes.chip} />;
  };
  return (
    <>
      <FormControl className={classes.formControl}>
        <Select
          inputProps={{
            name: "badge",
            id: "badge-simple"
          }}
          renderValue={renderChip}
          value={value}
          onChange={event => {
            console.log(event.target.value);
            setValue(event.target.value);
          }}
        >
          {chipOptions &&
            chipOptions.map(option => (
              <Chip
                key={option.value}
                label={option.value}
                className={classes.chip}
                value={option.value}
              />
            ))}
        </Select>
      </FormControl>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Edit Chip Select

Upvotes: 1

Related Questions