Picking an item in the select control does not stay selected on the page.

Question

I am working on the jsx below and when I select an item in the select control, I want the menu item i selected to show up/remain selected on my page. This is not happening. Each time I select an option, it is always blank. It is never selected.

what am i doing wrong here?

        import React, {PureComponent} from 'react';
        import {Link} from 'react-router-dom';
        import PageBase from "../../../widgets/PageBase/PageBase";
        import {
          Button,
          FormControl,
          Icon,
          InputLabel,
          MenuItem,
          Paper,
          Select,
          TextField,
          Typography
        } from "material-ui-next";
        import './PostCredit.css';
        import "../customer.css";

        class PostCredit extends PureComponent {
            constructor(props){
                super(props);

                this.state = {
                    invoiceNumber: '',
                };
            }

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

            render() {
              return (
               <div>
                   <form>
                    <div>
                        <div className="dot1">
                            <FormControl id="fred" className="form-control">
                                        <InputLabel htmlFor="invoiceNumber" shrink>Invoice Prepared</InputLabel>
                                        <Select
                                        value= {this.state.invoiceNumber}
                                        onChange ={this.handleChange}
                                        inputProps={{
                                            name: 'invoiceNumber',
                                            id: 'invoiceNumber',
                                        }}
                                        >
                                        <MenuItem value=""><em>None</em></MenuItem>
                                        <MenuItem value='1234567890'>1234567890</MenuItem>
                                        <MenuItem value='2345678901'>2345678901</MenuItem>
                                        </Select>

                            </FormControl>                                          
                        </div>   
                    </div>
                   </form>
               </div>
              );
            }
          }

          export default PostCredit;

Answer 1

In Select handleChange event.target.name is undefined, to resolve this there are two options,

Option 1 :-

Please change

 <Select
  value= {this.state.invoiceNumber}
  onChange ={this.handleChange}
  inputProps={{
  name: 'invoiceNumber',
  id: 'invoiceNumber',
 }} >

To,

 <Select
  value= {this.state.invoiceNumber}
  onChange ={this.handleChange}
  name='invoiceNumber'
  >

Option 2 :-

If You want to use Input Props only please add native property to select Component,

native is false by default. If native is true, the component will be using a native select element.

 <Select
      native
      value= {this.state.invoiceNumber}
      onChange ={this.handleChange}
      inputProps={{
      name: 'invoiceNumber',
      id: 'invoiceNumber',
     }} >

Hope this helps,

Cheers !!