How to use "React.useState()" in const classes in React - reactjs

Question

In this code, I am not able to use const [ isAlertVisible, setIsAlertVisible ] inside/outside of const FoodRow.js file.
How to fix this code? This is entire code which I am using.
Along with that, I am also placing .css file.
Alert is not getting displayed. Also on button click, Entire view goes away where, I am using FoodRow.js. Screen becomes blank.
import React from 'react'
import {View, Text,StyleSheet } from 'react-native';
import './FoodRow.css';
const FoodRow = (props) => {
const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);
const addToCartClick = () => {
console.log("addToCartClick");
setIsAlertVisible(true);
setTimeout(() => {
setIsAlertVisible(false);
}, 3000);
console.log("addToCartClick , isAlertVisible = "+isAlertVisible);
}
return (
<View style={{flex:1, flexDirection: 'row'}}>
<Text style = {styles.restaurantName}>{props.title }</Text>
<Text style = {styles.restaurantNameDesc}>{props.price }</Text>
<button style={{backgroundColor: "blue" , width: "100px", height: "20px"}} onClick={addToCartClick}>
Add To Cart
</button>
{isAlertVisible && <div className='alert-container'>
<div className='alert-inner'>Alert! Alert!</div>
</div> }
</View>
)
}
export default FoodRow
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
marginTop: 100,
padding: 20
},
restaurantName: {
color: 'red',
fontSize: 30,
fontStyle: 'italic',
paddingLeft: 100,
marginTop: 50
},
restaurantNameDesc: {
color: 'black',
fontSize: 20,
fontStyle: 'italic',
paddingLeft: 100
},
capitalLetter: {
color: 'red',
fontSize: 20
},
wordBold: {
fontWeight: 'bold',
color: 'black'
},
italicText: {
color: '#37859b',
fontStyle: 'italic'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
FoodRow.css:
.alert-container {
position: absolute;
top: 2rem;
left: 0;
right: 0;
}
.alert-inner {
display: inline-block;
padding: 8px 16px;
z-index: 1;
background-color: #ffffff;
box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
-webkit-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
-moz-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
}

Answer 1

Move function addToCartClick to component, like this:
import React from 'react'
import {View, Text,StyleSheet, Button } from 'react-native';
const FoodRow = (props) => {
const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);
const addToCartClick = () => {
console.log("addToCartClick");
setIsAlertVisible(true);
setTimeout(() => {
setIsAlertVisible(false);
}, 3000);
}
return (
<View style={{flex:1, flexDirection: 'row'}}>
<Text style = {styles.restaurantName}>{props.title }</Text>
<Text style = {styles.restaurantNameDesc}>{props.price }</Text>
<Button style={{backgroundColor: "blue" , width: "100px", height: "20px"}} onPress={addToCartClick}>
Add To Cart
</Button >
{isAlertVisible && <View className='alert-container'>
<Text className='alert-inner'>Alert! Alert!</Text >
</View >
}
</View>
)
}
export default FoodRow
Another thing is that you are using react native but alert is displayed as a "div", you should change it to View and Text, and import button from react-native. However if you want to style your button a bit more I suggest using TouchableOpacity