How to useuseState and Conditional renndering in ReactJS
In this approach, we’ll create a product card, featuring an original price. when the user clicks on a button, , the original price will appear with a visually striking line across it.
Example 1: In this example, we are using the useState hook that to allow us for toggling between displaying an original price and a discounted price. The card consists of an image, the name of the product, and a button that facilitates switching between prices. The image is retrieved from a specified URL, while the card’s appearance is enhanced using features like a white background, rounded corners, shadows, and appropriately formatted text. By pressing the button, users can seamlessly alternate between viewing the original price with a strike-through effect—a feature designed to facilitate easy comparison of prices.
Javascript
// App.js file import React, { useState } from "react" ; import { Text, View, Button, StyleSheet, Image, } from "react-native" ; function App() { const [strikeThrough, setStrikeThrough] = useState( false ); const toggleStrikeThrough = () => { setStrikeThrough(!strikeThrough); }; // Replace with your image URL const imageUrl = "https://media.w3wiki.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png" ; return ( <View style={styles.card}> <Image source={{ uri: imageUrl }} style={styles.image}/> <View style={styles.details}> <Text style={styles.title}> Product Name </Text> <Text style={ strikeThrough ? styles.strikeThroughPrice : styles.price}> {strikeThrough ? "Original Price: $50" : "Discounted Price: $40" } </Text> <Button title= "See Original Price" onPress={toggleStrikeThrough}/> </View> </View> ); } const styles = StyleSheet.create({ card: { backgroundColor: "#ffffff" , borderRadius: 10, shadowColor: "#000" , shadowOffset: { width: 1, height: 3, }, shadowOpacity: 1, shadowRadius: 15, elevation: 5, margin: 25, overflow: "hidden" , }, image: { width: "100%" , height: 200, resizeMode: "cover" , }, details: { padding: 16, }, title: { fontSize: 20, fontWeight: "bold" , marginBottom: 8, }, price: { fontSize: 18, color: "black" , }, strikeThroughPrice: { fontSize: 18, textDecorationLine: "line-through" , color: "red" , }, }); export default App; |
Output:
How To Add Strike Through On Text In React Native ?
In this article, we will explore two different approaches to adding a strike-through effect to text in React Native. It is also known as crossed-out text used to display the text as cross-marked.