Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

Value type for Material UI's Select component

$
0
0

I am using Material UI's Select component (which is like a drop down menu) like this:

const [criteria, setCriteria] = useState('');...  let ShowUsers = () => {    console.log('Working criteria', typeof(criteria));    const where: UserFilter = {};    if (criteria == '1') {      loadUsers({        variables: {          where: where,        },      });    }    if (criteria == '2') {      if (searchItem) {        where.firstName_contains = searchItem;        loadUsers({          variables: {           where: where,          },        });      }    }}...return(<Select          value={criteria}          onChange={event => setCriteria(event.target.value as string)}          //onChange={event => setCriteria(event.target.value)}          displayEmpty><MenuItem disabled value=""><em>Search By</em></MenuItem><MenuItem value={1}>All</MenuItem><MenuItem value={2}>First Name</MenuItem></Select><Button onClick={() => ShowUsers()}>Search</Button>)

Currently this gives me a warning that

Expected '===' and instead saw '=='  eqeqeq

To investigate this, I tried to print out the typeof(criteria) in the showUsers function. The type is number.

Hence, I changed (criteria === 1) etc. But then it gives an error that This condition will always return 'false' since the types 'string' and 'number' have no overlap.ts. But both are already numbers so I don't quite understand this.

Additionally, I also tried changing things like this:

const [criteria, setCriteria] = useState<number>();..onChange={event => setCriteria(Number(event.target.value))}

However, then I get new warnings that:

you have provided an out-of-range value `undefined` for the select component.Consider providing a value that matches one of the available options or ''.The available values are ``, `1`, `2`.
Warning: A component is changing an uncontrolled input of type hidden to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

and if I simply use criteria === '1' without changing anything else, the conditions are never made true even when they should be.

Where am I going wrong? Probably something minor.


Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>