How to get value from react-select in a functional component React - reactjs

Question

I am making use of react-select for the first time in a form. I am having issues getting the value from the select input and send it via Axios to backend.
const options=[
{ value: 'Telecomms', label: 'Telecomms' },
{ value: 'Construction', label: 'Construction' },
{ value: 'Manufacturing', label: 'Manufacturing' },
]
function Register(props) {
const [newUser,getUser]=useState({
name: "",
businessSector:"",
})
const dispatch = useDispatch()
// onChange handler
const changeHandle=e=>{
getUser({
...newUser,
[e.target.name]:e.target.value
})
}
const SubmitHandle=e=>{
e.preventDefault()
console.log(newUser)
if (newUser) {
dispatch(registerUser(newUser))
}
}
return (
<FormDialog
loading={isLoading}
onClose={onClose}
open
headline="Registration"
onFormSubmit={SubmitHandle }
hideBackdrop
hasCloseIcon
content={
<Fragment>
<Grid Container spacing={20}>
<TextField
variant="outlined"
margin="normal"
name="name"
value={newUser.name}
onChange={changeHandle}
required
fullWidth
label="Full name"
autoFocus
autoComplete="off"
type="text"
InputProps={{
className: classes.input
}}
FormHelperTextProps={{ error: true }}
/>
<InputLabel id="demo-simple-select-label">Business Sector</InputLabel>
<Select
value={newUser.businessSector}
onInputChange={changeHandle}
options={options}
name="businessSector"
/>
Any time i try to select an option is gives the following error
Type error: cannot read property 'name' of undefined
I am wondering where am actually getting it wrong. If I try to check the state from the dev tools, its not registering on state.

Answer 1

The error Type error: cannot read property 'name' of undefined comes from the use of [e.target.name] in your changeHandler. You're using the wrong prop/callback for this; instead of onInputChange use onChange:
const onChangeHandler = (change) => {
getUser({
...newUser,
businessSector: change
});
};
return (
<Select
value={newUser.businessSector}
onChange={onChangeHandler}
options={options}
/>
);
onInputChange is for when the input changes so if you were using the isSearchable prop you'd be able to type inside of the Select input and that would send the event e you're expecting to get, but because its just a select it returns an empty string instead.