How to Strike Through Text When Checking a Checkbox in ReactJS ?
Last Updated :
28 Apr, 2025
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.
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" }}>
GeeksforGeeks
</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" }}>
GeeksforGeeks
</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:
Similar Reads
How to strike through text when checking a Checkbox using HTML CSS and JavaScript ? In this article, we will learn how to apply strikethrough to a paragraph text when a checkbox is selected using HTML, CSS, and JavaScript. This is an interactive user-friendly effect and can be used on any web page. Here, we have included a code that simply creates a card with a checkbox, when you c
2 min read
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.PrerequisitesIntroduction to React NativeReact Native ComponentsReact HooksExpo CLINode.js and npm Syntax
4 min read
How To Add Strikethrough On Text In ReactJs ? Strikethrough text is a visual representation often used to denote changes or deleted content within an application. In this article, we will see various techniques to effectively add a strikethrough to Text using ReactJs. Strikethrough text, also referred to as crossed-out or deleted text serves as
4 min read
How To Use Checkboxes in ReactJS? Checkboxes are essential UI components used in web applications that allow users to select one or more options from a list. React makes it simple to work with checkboxes, whether you're dealing with a single checkbox or a list of checkboxes. In this article, we will see how to use Checkboxes in Reac
2 min read
How To Copy Text To The Clipboard In ReactJS? In ReactJS, you can copy text to the clipboard using two methods. One way is to use the copy-to-clipboard package, which provides a simple copy() function to handle the task. Alternatively, you can use the browser's built-in window.navigator.clipboard.writeText() method, which copies text to the cli
4 min read
How to Set Text Color in ReactJS ? React provides you the ability to create interactive and dynamic useÂr interfaces. Within these interfaces, the choice of text color holds significant importance as it enhanceÂs the visual appeal and engageÂment for users. A foundational aspect of styling revolveÂs around modifying text color. In t
3 min read