Approach 1 : Using React State and CSS

Steps to Create React Application And Installing Module:

Approach 2 Using <del> HTML tag and map():

In this approach,We’ll manage the strike-through state using React’s state management, apply conditional rendering based on the checkbox state, and use CSS text decoration style to toggle the strike-through effect based on the checkbox’s state.

Example 1: In this example, we use React Bootstrap components. It features a gray background, a green <h2> heading, and a checkbox. When the checkbox is clicked, the text below toggles between having a strikethrough effect and normal style.

Javascript

import { useState } from "react"; 
import Form from "react-bootstrap/Form"; 
  
function App() { 
    const [strikeThroughCSS, setStrikeThroughCSS] =  
        useState(false); 
  
    const pageStyle = { 
        backgroundColor: "gray", 
        padding: "40px", 
    }; 
  
    return ( 
        <div style={pageStyle}> 
            <Form> 
                <h2 style={{ color: "green" }}> 
                    w3wiki 
                </h2> 
                <Form.Check 
                    type={"checkbox"} 
                    onClick={() => 
                        setStrikeThroughCSS((prev) => !prev)} 
  
                /> 
                <p style={ 
                    { 
                        textDecoration: strikeThroughCSS ? 
                            "line-through" : "none"
                    }}> 
                    Using CSS text decoration style 
                    Strikethrough text effect 
                </p> 
            </Form> 
        </div> 
    ); 
} 
  
export default App;

Steps to Run the Application:

To run the application, type the following command:

npm run dev

Open your browser and go to http://localhost:5173/

Output:

How to Strike Through Text When Checking a Checkbox in ReactJS ?

In this article, we are going to learn about strike-through text when checking a checkbox. Strike through text when checking a checkbox in React-Bootstrap refers to the functionality of applying a strikethrough style to text when a corresponding checkbox is checked. It is commonly used to visually indicate completed or selected items in lists or tasks within a React-Bootstrap-based user interface.

Table of Content

Using React State and CSS
Using <del> HTML tag and map():</del>

We will explore all the above methods along with their basic implementation with the help of examples.

Tags:

#Geeks Premier League 2023 #React-Bootstrap #Geeks Premier League #ReactJS #Web Technologies