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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…