ReactNative issue with contructor saying ';' error - react-native

Question

This is my code want to implement an add country and region drop down. I am facing and error at 7,8 line saying semicolon is missing. I would like help as i am beginner at reactnative.
import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';
export default function App extends Component() {
constructor(props) {
super(props);
this.state = { country: '', region: '' };
};
selectCountry=(val)=>{
this.setState({ country: val });
};
selectRegion=(val)=>{
this.setState({ region: val });
};
const { country, region } = this.state;
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.text}>Enter name:</Text>
<TextInput
style={styles.input}
placeholder='e.g. John Doe'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Age:</Text>
<TextInput
keyboardType='numeric'
style={styles.input}
placeholder='2'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Country:</Text>
<CountryDropdown
value={country}
onValueChange={(val) => this.selectCountry(val)} />
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Region:</Text>
<RegionDropdown
country={country}
value={region}
onValueChange={(val) => this.selectRegion(val)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
alignItems:'center',
justifyContent:'center',
},
line:{
flexDirection:'row',
flex:0,
marginBottom:5,
},
text:{
flex:1,
},
input:{
flex:1,
width:70,
borderBottomWidth:1,
borderBottomColor:'#777',
},
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Answer 1

You are using a class component but calling it a function ....
change export default function App extends Component() { to export default class App extends Component(){
also add a render() function with appropriate surrounding brackets
new code below
import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';
export default class App extends Component() { <-- change here
constructor(props) {
super(props);
this.state = { country: '', region: '' };
};
selectCountry=(val)=>{
this.setState({ country: val });
};
selectRegion=(val)=>{
this.setState({ region: val });
};
render() { <-- add here
const {country, region} = this.state;
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.text}>Enter name:</Text>
<TextInput
style={styles.input}
placeholder='e.g. John Doe'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Age:</Text>
<TextInput
keyboardType='numeric'
style={styles.input}
placeholder='2'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Country:</Text>
<CountryDropdown
value={country}
onValueChange={(val) => this.selectCountry(val)}/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Region:</Text>
<RegionDropdown
country={country}
value={region}
onValueChange={(val) => this.selectRegion(val)}/>
</View>
</View>
);
} <-- add here
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
alignItems:'center',
justifyContent:'center',
},
line:{
flexDirection:'row',
flex:0,
marginBottom:5,
},
text:{
flex:1,
},
input:{
flex:1,
width:70,
borderBottomWidth:1,
borderBottomColor:'#777',
},
});