Material Ui select - Selected Item in Material Ui select component is showing empty

0
votes

I am showing a form on click of button, as part of form i have implemented material Ui select item. I have included all this code in child component and onchange handler function is in parent component. Ui and on change handler are working fine but the problem is select component is not showing selected menu item label. If i keep Option instead of MenuItem it is working

Here is the sandbox link Sandboxcode link

1
reactjsmaterial-ui
your sandbox link doesnt compile? – G_S
@G_S It is working . I just tried in incognito mode also – Roster
Ok It is working now. Let me check. – G_S
Your on change handler is a closure handleSelectChange = event => name => { i.e it is not a function, rather a function which returns another function. Your setState never gets called when you change the input. – Utsav Patel
@UtsavPatel Thats true. I modified code now but then also same issue – Roster

1 Answers

1
votes

You're setting the state incorrectly:

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

But according to your state structure you should wrap name-value object into serviceRequest:

this.setState({ 
     serviceRequest: {
         [event.target.name]: event.target.value }
      }
);