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

React-native picker with hooks typescript

$
0
0

I started studying react a short time ago and I did a project with select taking values ​​from an external api, it worked ok. When I went to react-native, to carry out the same project, I ended up getting stuck in the use of the picker, actually, with some control of the typescript.

Here is my code:

interface IBGEUFResponse {  sigla: string;}interface IBGECityResponse {  nome: string;}const Home = () => {  const [ufs, setUfs] = useState<string[]>([]);  const [cities, setCities] = useState<string[]>([]);  const [selectedUf, setSelectedUf] = useState('');  const [selectedCity, setSelectedCity] = useState('');

Here with some useEffect and control:

useEffect(() => {    axios.get<IBGEUFResponse[]>('https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome')    .then(response => {      const ufInitials = response.data.map(uf => uf.sigla);      setUfs(ufInitials);    });  }, []);  useEffect(() => {    if(selectedUf === '') {      return;    }    axios.get<IBGECityResponse[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`)    .then(response => {      const cityNames = response.data.map(city => city.nome);      setCities(cityNames);    });  }, [selectedUf]);

and finally the picker:

<Picker            style={styles.input}            selectedValue={selectedUf}            onValueChange={newUf => setSelectedUf(newUf)}>            {ufs.map(uf => {           return (<Picker.Item key={uf} label={uf} value={uf}            />           );})}

So setSelectedUf(newUf) gets a (TS:2345) error in (newUf) and i can't see how to make it's work.

Sorry guys, but I spent a couple of days looking for solutions on the internet, adapting solutions for similar errors and I couldn't solve it.


Viewing all articles
Browse latest Browse all 6213

Trending Articles



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