I'm pretty new to React and JavaScript, I'm trying to grab the value of a react-select dropdown option to use in a filter. The code below throws "Uncaught TypeError: event.target is undefined".
const [filter, setFilters] = useState({})
const handleFilters = (event)=> {
const value = event.target.value;
setFilters({
[event.target.name]: value,
});
};
console.log(filter);
React-Select
<Select name="category" onChange={ handleFilters } options={filterOptions} className='dropdown'/>
React-Select Options
const filterOptions = [
{ value: 'value1', label: 'label1' },
{ value: 'value2', label: 'label2' },
{ value: 'value3', label: 'label3' },
{ value: 'value4', label: 'label4' }
];
the consolelog I'm expecting when choosing the first dropdown option would be - { category, value1 }
Please be advised that react-select's onChange doesn't get called with the native select's onChange event but with the following API:
const onChange = (option: Option | null, actionMeta: ActionMeta<Option>) => {
...
}
So your handler function should look like this
const handleFilters = (option) => {
setFilters({
[event.target.name]: option,
});
};
You can make the below change in the onChange event
<Select name="category" onChange={(e)=> handleFilters(e) } options={filterOptions} className='dropdown'/>This is happening because the onChange handler of react-select directly returns the option(Object) that is selected.
So, for example event will contain {label:"label1",value:"value1"}
You can have a look at this codesandbox for reference