React Native change integer value when button is kicked - react-native

Question

I am having a problem changing an integer value, the code below is showing a list of item, and control how many items will be shown when the button is clicked
The variable I want to change when it is clicked,
var showdata = 5;
code for the button and want to change it to 10 when clicked, also want the text change to Less, and showdata change back to 5 when it is for the second time
<View style={externalStyle.more_buttom}>
<TouchableOpacity onPress={() => showdata == 10}>
<Text
style={{
fontWeight: "bold",
fontSize: 13,
color: "#FFF",
}}
>
More{" "}
</Text>
</TouchableOpacity>
</View>
code for the list of item, show data used at "topTen.slice"
<ScrollView
vertical
showsHorizontalScrollIndicator={false}
style={{ paddingBottom: 0 }}
>
{isLoadingTopTen ? (
<Text
style={{
fontWeight: "bold",
fontSize: 13,
color: "#FFF",
textAlign: "center",
}}
>
Loading top ten
</Text>
) : (
topTen
.slice(0, showdata)
.map((item, index) => (
<InfoCard
navigation={navigation}
brand={item.Name}
amount={item.esgrating}
key={index}
/>
))
)}
</ScrollView>

Answer 1

Use useState hooks for changing the value of showData.
const [showdata, setShowData] = useState(5)
//..........
<View style={externalStyle.more_buttom}>
<TouchableOpacity onPress={() => setShowdata(10)}>
<Text
style={{
fontWeight: "bold",
fontSize: 13,
color: "#FFF",
}}
>
More{" "}
</Text>
</TouchableOpacity>
</View>
Working Example: Expo Snack
import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
const [showdata, setShowData] = useState(5);
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
setShowData(10);
}}>
<View style={{ backgroundColor: 'pink', padding: 10 }}>
<Text
style={{
fontWeight: 'bold',
fontSize: 13,
color: '#000',
}}>
More {showdata}
</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});