How to useCSS in React JS in ReactJS

Approach 2: On Hover Effect Using React State

CSS is used in this approach to incorporate a strikethrough effect on text. When the “strikethrough” class is applied to completed tasks within a list, such as a to-do list, it triggers the visual indication of a crossed-out line through the text using the “line-through” text-decoration property. This effectively marks the tasks as finished.

Example: The given React example demonstrates a component that showcases a list of completed tasks with strikethrough styling. These tasks are stored in an array. The design highlights centered headings in green and includes paragraphs. Further, the list items are both centered and visually enhanced with a strikethrough appearance.

App.js file

Javascript

import React from 'react';
 
function App() {
 
    // Array of completed tasks
    const completedTasks = ['Task A', 'Task B', 'Task C'];
 
    // Style for the strikethrough list items
    const listItemStyle = {
        textDecoration: 'line-through',
        marginBottom: '8px',
        fontSize: '16px',
        color: '#555',
    };
 
    const completedTasksHeadingStyle = {
        marginBottom: '16px',
        color: '#333',
        textAlign: 'center',
    };
 
    const heading = {
        marginBottom: '16px',
        textAlign: 'center',
        color: 'green',
    };
 
    const listContainerStyle = {
        listStyle: 'none',
        paddingLeft: '0',
        textAlign: 'center',  // Center align the list
    };
 
    return (
        <div>
            <h1 style={heading}>w3wiki</h1>
 
            <h2 style={completedTasksHeadingStyle}>
                Completed Tasks:
            </h2>
 
            {/* List of Completed Tasks */}
            <ul style={listContainerStyle}>
                {completedTasks.map((task, index) => (
                    <li key={index} style={listItemStyle}>
                        {task}
                    </li>
                ))}
            </ul>
        </div>
    );
}
 
export default App;

Step to run the application:

Step 1: To open the application, use the Terminal and enter the command listed below

npm start

Output:

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 a formatting style employed to indicate obsolete or irrelevant content within ReactJS applications.