I have a select component, I can see the menu items and select them, but the component does not display the selected value. Its handler function works fine because when I select an item the value in the database is updated
The following is the code part:
handleSelect(event){
this.props.handleChange(event);
}
render() {
const values= {
"1": translation.getText("SAMEWINDOW"),
"2": translation.getText("NEWWINDOW"),
"3": translation.getText("NEWTAB")
};
return(
<Select
name="code"
value={values[this.props.data.code]}
onChange={this.handleSelect}
>
{Object.keys(values).map((item) => (
<MenuItem value={item}>{values[item]}</MenuItem>
))}
</Select>
)
}
I tried changing the type of object key from string to number but it didn't help
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You are sending the value to the component.
Create a state variable and update the state when the value changes.
For example -
const [value, setValue] = useState("");Then update the status in handleSelect as shown below
handleSelect(e) { setValue(e); }Finally, send the updated value in the selection component
<select name="code" value={values[this.props.data.code]} menuItem = {value} onChange={this.handleSelect} />