Material UI select component not displaying selected value correctly

Question

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

Answer 1

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} />