How to cross out (Strikethrough) Text in React

# Table of Contents

1. Cross out (Strikethrough) Text in React
2. Cross out (Strikethrough) text on Click in React

# Cross out (Strikethrough) Text in React

Use the textDecoration property to strikethrough text in React.

The text-decoration CSS property sets the appearance of decorative lines on text.

Copied!
const App = () => {
  return (
    <div>
      <h2>
        <span style={{textDecoration: 'line-through'}}>
          bobby
        </span>{' '}
        hadz
      </h2>
    </div>
  );
};

export default App;

We used the text-decoration property to cross out text in React.

Notice that multi-word properties are camelCased when specified as inline styles.

The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

Copied!
<h2>
  <span style={{textDecoration: 'line-through'}}>
    bobby
  </span>{' '}
  hadz
</h2>

When the textDecoration property of an element is set to line-through, it's text is crossed out.

If you need to do this often, extract the span element into a component that renders its children.

Copied!
function StrikethroughText({children}) {
  return <span style={{textDecoration: 'line-through'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <h2>
        <StrikethroughText>Hello</StrikethroughText> world
      </h2>
    </div>
  );
};

export default App;

This code sample achieves the same result. Whatever we pass between the opening and closing tags of the StrikethroughText component will have its text crossed out.

If you also need to set the text color, click on the following link.

# Using a global CSS class to strikethrough text

An alternative solution is to define a strikethrough class in a global CSS file.

Copied!
.strikethrough {
  text-decoration: line-through;
}

And here is how we would import the App.css file and use the strikethrough class.

Copied!
import './App.css';

const App = () => {
  return (
    <div>
      <h2>
        <span className="strikethrough">Hello</span> world
      </h2>
    </div>
  );
};

export default App;

This approach enables us to reuse commonly used styles by defining them in a global CSS file.

It's a best practice to import your global CSS files in your index.js file because then they wouldn't only get loaded when a certain component is mounted.

# Cross out (Strikethrough) text on Click in React

To cross out text on click:

1. Set the onClick prop on the element.
2. When the element is clicked, check if its text-decoration property is set.
3. If the property is set, remove it, otherwise set it to line-through.

Copied!
const App = () => {
  const handleClick = event => {
    if (event.target.style.textDecoration) {
      event.target.style.removeProperty('text-decoration');
    } else {
      event.target.style.setProperty('text-decoration', 'line-through');
    }
  };

  return (
    <div>
      <p onClick={handleClick}>Walk the dog</p>

      <br />

      <p onClick={handleClick}>Buy groceries</p>
    </div>
  );
};

export default App;

We set the onClick on the paragraph elements, so every time they are clicked, the handleClick function is invoked.

We first check if the textDecoration property is set in the element's style object.

If the property is set, we use the removeProperty() method to remove it.

If the textDecoration property is not set, we use the setProperty() method to cross out the text.

This has the effect of toggling the strikethrough style on the paragraph tags.

You can set the onClick prop on as many elements as necessary and use the same handleClick function because it uses the event object to get a reference to the element that was clicked.