React - event.target is undefined when trying to filter React-select options

Question

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 }

Answer 1

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