Make Text Bold in React.js

Introduction

React.js is a popular JavaScript library for building user interfaces, particularly single-page applications. One of the common tasks when working with React.js is manipulating text styles, such as bolding specific text.

This Byte will show you how to actually bold text in React.js by using a span component and how to conditionally apply a bold style.

To bold text in React.js, we can use either CSS or HTML's <strong> tag. For most of our examples in this Byte, we'll show how to do it with the CSS class, .bold. This is much easier for cases where you're conditionally adding the bold style, which is why we're showing it this way.

Boldening Text in React.js

In your CSS file, you can define a class with the font-weight property set to bold. Here's an example:

.bold {
  font-weight: bold;
}

Then, you can use this class in your React.js components to add a bold style to the text, which in this case is wrapped in a <p> tag:

function MyComponent() {
  return <p className="bold">This is some bold text.</p>;
}

After this code runs, the final HTML output will be:

<p class="bold">This is some bold text.</p>

Creating a Span Component

Another approach to bolden text in React.js is to create a <span> component. This component will wrap the text that you want to bolden. Here's how you can do it:

function BoldSpan({ children }) {
  return <span className="bold">{children}</span>;
}

You can then use this BoldSpan component to bolden text:

function MyComponent() {
  return (
    <p>
      This is some <BoldSpan>bold</BoldSpan> text.
    </p>
  );
}

The output of the above code will be:

<p>This is some <span class="bold">bold</span> text.</p>

This method is better when you don't want to bolden the entire paragraph, but instead just a few words or less.

Conditionally Applying Bold Style

In some cases, you might want to apply the bold style conditionally. In React.js, you can achieve this with a ternary operator. Here's an example:

function MyComponent({ shouldBolden }) {
  return (
    <p className={shouldBolden ? "bold" : ""}>This is some text.</p>
  );
}

In the above code, the shouldBolden prop determines whether the text will be bold or not. If shouldBolden is true, the className will be "bold", and the text will be bold. If shouldBolden is false, the className will then only be an empty string, and therefore the text will not be bold.

Note: The ternary operator is just one of many ways to conditionally apply styles in React.js. You could also use if statements, switch statements, or any other conditional logic that suits your needs. In this case, the ternary operator is more compact and cleaner than the other methods.

Using the strong HTML Tag to Bold Text

As mentioned earlier, we can also use the <strong> tag to bolden text. While <strong> does not necessarily mean "bold", most browsers do render it this way. This is an inline element that can surround any amount of text to add the bold style.

Using an example from earlier, but with <strong>, it would look like this:

function MyComponent() {
  return (
    <p>
      This is some <strong>bold</strong> text.
    </p>
  );
}

Note: Keep in mind that there is a difference to using font-weight: bold, <strong>, and <b>. According to MDN:

"Should I use <b> or <strong>? Don't they both do the same thing?"

Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

Conclusion

In this guide, we've learned how to bolden specific text in React.js. We showed a few different ways to achieve this, like using the .bold CSS class with <p> tags, with <span> tags, and also using the <strong> tag without any CSS. We also showed how to conditionally apply a bold style based on certain criteria

This approach gives us a flexible way to control the appearance of our text in React. With this knowledge, you can start to explore more complex styling and conditional rendering scenarios in your React applications.