Getting value of select option in react - html

Question

I'm using Material UI for my react app and am trying to get the value of a select form.
This works perfectly with the following code:
<select name="role" value={props.role} onChange={props.handleInputChange}>
<option value="client">Client</option>
<option value="worker">Worker</option>
</select>
However, if I try to implement the exact same thing using Material UI
<FormControl margin="dense" className={classes.textFieldSelect}>
<InputLabel htmlFor="role" >Role</InputLabel>
<Select
value={props.role}
onChange={props.handleInputChange}
input={<Input id="role" />}
>
<MenuItem value="worker">Worker</MenuItem>
<MenuItem value="client">Client</MenuItem>
</Select>
</FormControl>
Here's the code for handInput change in my parent component:
handleInputChange(e) {
e.preventDefault();
const target = e.target;
const value = target.value;
const name = target.name;
this.setState({ currentUser: { ...this.state.currentUser, [name]: value } });
}
The value of the select bar doesn't change when I click the menu items. However, the values do change in the TextField if I select a different role in the plain HTML element.
Any clues on what I am doing wrong?

Answer 1

I just spent some time debugging it and it turns out that the reason it didn't work is because the e.target.name property is undefined when I click the . I can fix this by passing in a specific name parameter when I call handleInputChange (e.g. handleInputChange('role')). Thanks for looking at it though!