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.