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'.

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'.

• javascript
• reactjs
• typescript
• react-native
• material-ui

2 Answers 2

You have to assert the unknown typed values before using them. If you're sure that the values from onChange events will always be strings, then you can do onChange={event => setCriteria(event.target.value as string)} and the piler should no longer plain.

define a type to your event argument. So it would be

onChange={event:React.ChangeEvent<{ value: unknown }> => setCriteria(event.target.value)}