I have created a dropdown menu using Material UI select. It says "Search By". When we click it, it gives us a list. When I select one of the options, I want to store the option and change the "Search By" to the option selected.
export default function UserSearchPage(){
const [criteria, setCriteria] = useState('');
const [searchItem, setSearchItem] = useState('');
return (
<div>
<div className='main-content'>
<Select
value = {criteria}
onChange={
value => { setCriteria(value);}
}
displayEmpty
>
<MenuItem disabled value="">
<em>Search By</em>
</MenuItem>
<MenuItem value={1}>First Name</MenuItem>
<MenuItem value={2}>Last Name</MenuItem>
<MenuItem value={3}>Phone Number</MenuItem>
<MenuItem value={4}>Email</MenuItem>
</Select>
</div>
)
</div>
);
}
Currently, the onChange gives me this error on value:
Argument of type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to parameter of type 'SetStateAction<string>'.
Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type '(prevState: string) => string'.
and if I use this:
onChange={event => setCriteria(event.target.value)}
I get:
Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<string>'.
Type 'unknown' is not assignable to type '(prevState: string) => string'.