How to bold specific text in React.js

# Bold specific text in React.js

Use inline styles to bold specific text in React.js.

The bold font will only be applied to the element to which it was added and its children.

Copied!
const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <span style={{fontWeight: 'bold'}}>world</span>
        !!!
      </p>
    </div>
  );
};

export default App;

We used inline styles to bold some text in an element.

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.

The bold font is only going to be applied to the span element.

I've also written an article on how to set a global font family.

# Extract the span element into a component

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

Copied!
function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <BoldText>world</BoldText>
        !!!
      </p>
    </div>
  );
};

export default App;

This code sample achieves the same result. Whatever we pass between the opening and closing tags of the BoldText component will have the bold style applied.

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

# Conditionally bolding text

You can use the ternary operator to conditionally bold text in a React component.

Copied!
import {useState} from 'react';

const App = () => {
  const [isBold, setIsBold] = useState(false);

  return (
    <div>
      <p>
        bobby
        <span style={{fontWeight: isBold ? 'bold' : 'normal'}}>hadz</span>
        .com
      </p>

      <button onClick={() => setIsBold(isBold => !isBold)}>
        Increment count
      </button>
    </div>
  );
};

export default App;

The code sample only bolds the text when the isBold state variable is set to true.

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

Copied!
<p>
  bobby
  <span style={{fontWeight: isBold ? 'bold' : 'normal'}}>hadz</span>
  .com
</p>

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

If the isBold variable stores a true value, the string bold is returned, otherwise, the string normal is returned.

I've also written an article on how to cross out (strikethrough) text.

# Defining a bold class in a global CSS file

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

Copied!
.bold {
  font-weight: bold;
}

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

Copied!
import './App.css';

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <span className="bold">world</span>
        !!!
      </p>
    </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.