reactjs - Material-ui Select MenuItem not showing

Question

I'm new to Material-ui and have been struggling with Select MenuItem. When I select one of the MenuItems in Select, I am not seeing anything in my browser. For example, when I select "Unit A" it is not shown in the browser after I select. It is still an empty string when I console log it also. Very sure that it is not selected and I would like to know what I am missing.

const myApp = () => {
    const [inputs, setInputs] = useState({
         salesUnit : "",
         serialNumber : "",
         partNumber : "",
         unitLocation : ""
})
    
    const addUnit = () => {
        http post request to backend
}

    const onChange = e => {
      setInputs({...inputs, [e.target.name] : e.target.value})
}

return (
        <Fragment>
            <div className="salesinventory-container">
            <h1 className="salesinventory-h1">Sales inventory</h1>
            <FormControl className={classes.formControl} onSubmit={addUnit} noderef={noderef}>
                <InputLabel id="demo-simple-select-label">Select Unit</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={salesUnit}
                    onChange={e => onChange(e)}
                    ref={noderef}
                    >
                    <MenuItem value={`Unit A`}>Unit A</MenuItem>
                    <MenuItem value={`Unit B`}>Unit B</MenuItem>
                    <MenuItem value={`Unit C`}>Unit C</MenuItem>
                    <MenuItem value={`Unit D`}>Unit D</MenuItem>
                    <MenuItem value={`Unit E`}>Unit E</MenuItem>
                    <MenuItem value={`Unit F`}>Unit F</MenuItem>
                </Select>
                <br></br>
            <div>
                <TextField id="standard-basic" label="Enter Serial Number" onChange={e => onChange(e)} value={serialNumber} name="serialNumber"/>
            </div>
                <br></br>
            <div>
                <TextField id="standard-basic2" label="Enter Part Number" onChange={e => onChange(e)} value={partNumber} name="partNumber"/>
            </div>
                <br></br>
            <div>
                <TextField id="standard-basic3" label="Enter BACS location" onChange={e => onChange(e)} value={unitLocation} name="unitLocation"/>
            </div>
                <br></br>
            <button>Add</button>
            </FormControl>
     </Fragment>
)
}

question from:https://stackoverflow.com/questions/65928935/material-ui-select-menuitem-not-showing

Answer 1

u can use onSelect event, but i don't see where is the salesUnit state?? it should be

inputs.salesUnit

right? and like @BYates says, u need name attribute!