I present the following error: TypeError: savesearch is not a function. (In 'savesearch((0, _extends2.default)({}, search, { country: country }))', 'savesearch' is an instance of Object)
below my code
Form.js
In this js file I have placed everything regarding the form, in this case a picker to select a country and a button so that when pressed it consults an api and can obtain information on the countries.
import React,{useState} from 'react';
import { Text, TextInput, View, StyleSheet, TouchableWithoutFeedback,Animated,Alert }
from 'react-native';
import {Picker} from '@react-native-community/picker';
const Formulario=(busqueda,guardarbusqueda)=>{
const {pais}=busqueda;
const [animacionboton]=useState(new Animated.Value(1));
const consultarPais=()=>{
if(pais.trim()===''){
mostarAlerta();
return;
}
//Consultar API
guardarconsultar(true);
};
const mostarAlerta=()=>{
Alert.alert('Error','Debe seleccionar un país'),[{Text:'Entendido'}];
};
const animacionEntrada=()=>{
Animated.spring(animacionboton,{
toValue:.9,
useNativeDriver: true // Add This line
}).start();
};
const animacionSalida=()=>{
Animated.spring(animacionboton,{
toValue:1,
useNativeDriver: true // Add This line
}).start();
};
const estiloAnimacion={
transform:[{
scale:animacionboton
}]
};
return(
<>
<View>
<View>
<Text style ={styles.input}>Pais</Text>
</View>
<View>
<Picker
selectedValue={pais}
onValueChange={pais=>guardarbusqueda({...busqueda,pais})}
onPress={()=>consultarPais()}
style={styles.itempais}>
<Picker.Item label="--seleccione un pais--" value=""/>
<Picker.Item label="El Salvador" value="sv"/>
<Picker.Item label="Guatemala" value="gt"/>
<Picker.Item label="Honduras" value="hn"/>
<Picker.Item label="Nicaragua" value="ni"/>
<Picker.Item label="Panama" value="pa"/>
<Picker.Item label="Costa Rica" value="cr"/>
<Picker.Item label="Mexico" value="mx"/>
<Picker.Item label="Argentina" value="ar"/>
<Picker.Item label="Estados Unidos" value="us"/>
<Picker.Item label="Colombia" value="co"/>
<Picker.Item label="España" value="es"/>
<Picker.Item label="Peru" value="pe"/>
</Picker>
</View>
<TouchableWithoutFeedback
onPressIn={()=>animacionEntrada()}
onPressOut={()=>animacionSalida()}
>
<Animated.View style={styles.btnBuscar}>
<Text style={styles.textoBuscar}>Buscar País</Text>
</Animated.View>
</TouchableWithoutFeedback>
</View>
</>
);
};
const styles= StyleSheet.create({
input:{padding:10,
height:50,
fontSize:20,
marginBottom:20,
textAlign:'center',
color :'#000'
},
itempais:{
height:60,
backgroundColor:'#fff',
},
btnBuscar:{
marginTop:50,
height:50,
backgroundColor:'#000',
fontSize:20,
marginBottom:20,
textAlign:'center'
},
textoBuscar:{
color:'#fff',
fontWeight:'bold',
textTransform:'uppercase',
textAlign:"center",
fontSize:18
}
})
export default Formulario;
Pais.js
In this js file a card component to display the information of the selected country.
import React from 'react';
import { StyleSheet, View, Text} from 'react-native';
import { Card } from 'react-native-elements';
const Pais = ({ resultado }) => {
const { capital, name, subregion, region } = resultado;
return (
<Card>
<Card.Title>{name}</Card.Title>
<Card.Divider />
<View style={{ justifyContent: 'center' }}>
<Text>Capital:{capital}</Text>
<Text>Region:{region}</Text>
<Text>Subregion:{subregion}</Text>
</View>
</Card>
);
};
export default Pais;
index.js
In this js file I have placed all the logic of the application.
import React,{useState,useEffect} from 'react';
import {Text,View,StyleSheet,Alert,AppRegistry} from 'react-native';
import Formulario from './src/components/Formulario';
import Pais from './src/components/Pais';
export default function App(){
const [busqueda,guardarbusqueda]=useState({
pais:'',
});
const [consultar,guardarconsultar]=useState(false);
const [resultado,guardarresultado]=useState({});
useEffect(()=>{
const {pais} = busqueda;
const consultarPais = async () => {
if(consultar){
const url='https://restcountries.eu/rest/v2/alpha/${pais}';
try{
const respuesta = await fetch(url);
const resultado = await respuesta.json();
guardarresultado(resultado);
guardarconsultar(false);
}catch(error){
mostrarAlerta();
}
}
};
consultarPais();
},[consultar]);
const mostrarAlerta=()=>{
Alert.alert('Error','No hay resultado intenta con otra ciudad o país'),[{Text:'Ok'}];
};
return(
<View>
<View>
<Formulario
busqueda={busqueda}
guardarbusqueda={guardarbusqueda}
guardarconsultar={guardarconsultar}
/>
<Pais resultado={resultado}/>
</View>
</View>
);
}
AppRegistry.registerComponent('paises', () => App);
