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.
Steps to Create React Application And Installing Module:
Creating React Application And Installing Module:
Step 1: Create a React application using the following command
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the required modules using the following command.
npm install --save mdbreact react-chartjs-2
Step 4: Add Bootstrap CSS and fontawesome CSS to index.js.
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
Project structure:
Approach 1 : Using React State and CSS
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:
Approach 2 Using <del> HTML tag and map():
In this approach, we use the <del> tag and the map function to create a checkbox-controlled strikethrough effect for a list of text items. Checked checkboxes apply the <del> tag, striking through the text.
Example 1: In this example, we use the <del> tag and the map function to create a checkbox-controlled strikethrough effect for a list of text items. Checked checkboxes apply strikethrough styling.
Javascript
import { useState } from "react" ; import Form from "react-bootstrap/Form" ; function App() { const [textItems, setTextItems] = useState([ { text: "JavaScript" , checked: false }, { text: "React.Js" , checked: false }, { text: "Node.Js" , checked: false }, { text: "HTML" , checked: false }, { text: "CSS" , checked: false }, ]); const handleCheckboxChange = (index) => { const updatedTextItems = [...textItems]; updatedTextItems[index].checked = !updatedTextItems[index].checked; setTextItems(updatedTextItems); }; return ( <div style={{ backgroundColor: "black" , color: "white" , padding: "40px" }}> <Form> <h2 style={{ color: "green" }}> w3wiki </h2> {textItems.map((item, index) => ( <div key={index} style={{ display: "flex" , alignItems: "center" }}> <Form.Check type= "checkbox" checked={item.checked} onChange={() => handleCheckboxChange(index)} /> <span style={{ marginLeft: "10px" }}> {item.checked ? <del>{item.text}</del> : item.text} </span> </div> ))} </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: