How can I show some components when i click on a button? - reactjs

Question

next to Entertain text, there is an icon, called Button,
When I click on that icon, I want those parts(netflix to twitch) to come that place.
How can I do that? I mean, i want those part to be hide at first, but after i click on that icon, it should come to that place.
Here are my code,
ThirdScreen.js
import React from "react";
import { Text, SafeAreaView, View, StyleSheet, ScrollView } from "react-native";
import Transfer from "../icons/transfer.svg";
import Entertain from "../icons/entertain.svg";
import Netflix from "../icons/netflix.svg";
import Button from "../icons/button.svg";
import Dribble from "../icons/dribble.svg";
import Spotify from "../icons/spotify.svg";
import Twitch from "../icons/twitch.svg";
import Bill from "../icons/bill.svg";
import Time from "../icons/time.svg";
import Home from "../icons/home.svg";
import User from "../icons/user.svg";
import Ratio from "../icons/ratio.svg";
const ThirdScreen = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
<View style={styles.rows}>
<Text style={styles.bigBold}>Category</Text>
<Text style={{ color: "#7cb3d9" }}>This week</Text>
</View>
<View style={{ padding: 20 }}>
{/* Transfer */}
<View style={[styles.elevation, {marginBottom:10,}]}>
<View style={[styles.rows, {padding:5}]}>
<View style={styles.iconText}>
<Transfer height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Transfer</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
<ScrollView style={{padding:10}}>
{/* Netflix */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#ffd4d5"}]}>
<Netflix height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Netflix</Text>
<Text style={styles.grayText}>4 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$8.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Dribble */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#fdd7e6" }]}>
<Dribble height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Dribble</Text>
<Text style={styles.grayText}>12 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$120.00</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Spotify */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#d5ffd9" }]}>
<Spotify height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Spotify</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$9.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Twitch */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#efd6ff" }]}>
<Twitch height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Twitch</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$24.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
</ScrollView>
{/* Bill */}
<View style={styles.elevation}>
<View style={[styles.rows, { padding: 5, }]}>
<View style={styles.iconText}>
<Bill height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Bill</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
</View>
{/* Footer */}
<View style={{flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
<Home height={30} width={22} fill={"#1E2439"} />
<Ratio height={30} width={22} fill={"#1E2439"} />
<Time height={30} width={22} fill={"#1E2439"} />
<User height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
transaction: {
fontSize: 17,
fontWeight: "bold",
letterSpacing: .5,
},
elevation: {
backgroundColor: "#fdfdfd",
elevation: 3,
height: 60,
borderRadius: 10,
},
rows: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginVertical:10,
},
iconText: {
flexDirection: "row",
alignItems: "center",
},
iconBackground: {
height: 40,
width: 40,
borderRadius: 13,
alignItems: "center",
justifyContent: "center"
},
entertainItems: {
flexDirection: "column",
marginLeft:20,
},
bigBold: {
fontSize: 17,
fontWeight: "bold",
marginLeft:15,
},
entertainItemsText: {
fontSize:15,
fontWeight:"bold",
},
redText : {
color:"#e46e6a",
fontWeight: "bold",
fontSize:15,
},
grayText: {
color: "#b2b4c3",
},
})
export default ThirdScreen;
Here is the screenshot:

Answer 1

A simple approach is to store a boolean isShown that is toggled when interacting with the button. Use the useState hook to store and update that boolean:
const ThirdScreen = () => {
// Default to `false` so the section is initially hidden
const [isShown, setIsShown] = React.useState(false);
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
{/* ... */}
<View style={{ padding: 20 }}>
{/* Transfer */}
{/* ... */}
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button
height={30}
width={22}
onClick={() => { setIsShown((currIsShown) => !currIsShown); }}
fill={"#1E2439"}
/>
</View>
</View>
</View>
{/* Render the inner <ScrollView> only if `isShown` is true */}
{isShown && (
<ScrollView style={{padding:10}}>
{/* Netflix */}
{/* ... */}
</ScrollView>
)}
{/* Bill */}
{/* ... */}
</View>
{/* Footer */}
{/* ... */}
</View>
</SafeAreaView>
)
}

Answer 2

You can use the onClick event to change your required dom
For this first, make a state and set the initial value to false. Then use the onClick event and change the state using useEffect of setState.
At Last, change the CSS of the section to display: "none" on false and display: "block"( or other value ) on true