React MaterialUI Select MenuItem component, should print value when nothing selected

Question

I am new to React, I am using Material UI with react for an project. I created an Select MenuItem component. In that, i passed an image as value. So,If a user select an option, it will print the image. My requirement is, when nothing selected, it should print all values. Even, when the page loads, it should display all the images by default.

My Code:

      state = {
   name: '',
   open: false,
 };

 handleChange = event => {
   this.setState({ [event.target.name]: event.target.value });
 };

 handleClose = () => {
   this.setState({ open: false });
 };

 handleOpen = () => {
   this.setState({ open: true });
 };
 componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
    });
  }

    <FormControl variant="outlined" className={classes.formControl}>
                <InputLabel
                  ref={ref => {
                    this.InputLabelRef = ref;
                  }}
                  classes={{
                shrink: classes.inputLabelShrink
              }}
                  htmlFor="outlined-name-simple"
                  className="drop-input"
                >
                  I am a
                </InputLabel>
                <Select
                  value={this.state.name}
                  onChange={this.handleChange}
                  className="drop-select"
                  input={
                    <OutlinedInput
                      labelWidth={this.state.labelWidth}
                      name="name"
                      id="outlined-name-simple"
                    />
                  }

                >

                  <MenuItem className={classes.outlineInput} value={img}>School Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Business Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Non-profit Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Volunteer</MenuItem>
                </Select>
              </FormControl>

<img src={this.state.name} />

Thanks in Advance.

wc_coder wc_coder · Accepted Answer · 2018-11-16T17:46:45

replace the line

<img src={this.state.name} />

with a conditional to check this.state.name, and if it is null display all the pictures:

{ this.state.name ? 
    <div>
        <img src={"..."} />
        <img src={"...'} />
        <img src={"..."} />
        //do this for each of the pictures you want to display
    </div>
 :
    <img src={this.state.name} />

}

Replace the src values with the urls to the images you want to display

React MaterialUI Select MenuItem component, should print value when nothing selected

2 Answers