Make Textual content Daring in React.js

Introduction

React.js is a well-liked JavaScript library for constructing consumer interfaces, notably single-page purposes. One of many widespread duties when working with React.js is manipulating textual content kinds, reminiscent of bolding particular textual content.

This Byte will present you easy methods to really daring textual content in React.js by utilizing a span part and easy methods to conditionally apply a daring fashion.

To daring textual content in React.js, we will use both CSS or HTML’s <robust> tag. For many of our examples on this Byte, we’ll present easy methods to do it with the CSS class, .daring. That is a lot simpler for instances the place you are conditionally including the daring fashion, which is why we’re exhibiting it this manner.

Boldening Textual content in React.js

In your CSS file, you’ll be able to outline a category with the font-weight property set to daring. Here is an instance:

.daring {
  font-weight: daring;
}

Then, you need to use this class in your React.js parts so as to add a daring fashion to the textual content, which on this case is wrapped in a <p> tag:

perform MyComponent() {
  return <p className="daring">That is some daring textual content.</p>;
}

After this code runs, the ultimate HTML output will probably be:

<p class="daring">That is some daring textual content.</p>

Making a Span Element

One other strategy to bolden textual content in React.js is to create a <span> part. This part will wrap the textual content that you just wish to bolden. Here is how you are able to do it:

perform BoldSpan({ youngsters }) {
  return <span className="daring">{youngsters}</span>;
}

You’ll be able to then use this BoldSpan part to bolden textual content:

perform MyComponent() {
  return (
    <p>
      That is some <BoldSpan>daring</BoldSpan> textual content.
    </p>
  );
}

The output of the above code will probably be:

<p>That is some <span class="daring">daring</span> textual content.</p>

This technique is healthier when you do not wish to bolden the whole paragraph, however as an alternative only a few phrases or much less.

Conditionally Making use of Daring Fashion

In some instances, you would possibly wish to apply the daring fashion conditionally. In React.js, you’ll be able to obtain this with a ternary operator. Here is an instance:

perform MyComponent({ shouldBolden }) {
  return (
    <p className={shouldBolden ? "daring" : ""}>That is some textual content.</p>
  );
}

Within the above code, the shouldBolden prop determines whether or not the textual content will probably be daring or not. If shouldBolden is true, the className will probably be "daring", and the textual content will probably be daring. If shouldBolden is false, the className will then solely be an empty string, and subsequently the textual content won’t be daring.

Be aware: The ternary operator is only one of some ways to conditionally apply kinds in React.js. You may additionally use if statements, change statements, or some other conditional logic that fits your wants. On this case, the ternary operator is extra compact and cleaner than the opposite strategies.

Utilizing the robust HTML Tag to Daring Textual content

As talked about earlier, we will additionally use the <robust> tag to bolden textual content. Whereas <robust> doesn’t essentially imply “daring”, most browsers do render it this manner. That is an inline factor that may encompass any quantity of textual content so as to add the daring fashion.

Utilizing an instance from earlier, however with <robust>, it could seem like this:

perform MyComponent() {
  return (
    <p>
      That is some <robust>daring</robust> textual content.
    </p>
  );
}

Be aware: Understand that there is a distinction to utilizing font-weight: daring, <robust>, and <b>. In accordance with MDN:

“Ought to I exploit <b> or <robust>? Do not they each do the identical factor?”

Not precisely. The <robust> factor is for content material that’s of higher significance, whereas the <b> factor is used to attract consideration to textual content with out indicating that it is extra vital.

Conclusion

On this information, we have discovered easy methods to bolden particular textual content in React.js. We confirmed a couple of alternative ways to realize this, like utilizing the .daring CSS class with <p> tags, with <span> tags, and in addition utilizing the <robust> tag with none CSS. We additionally confirmed easy methods to conditionally apply a daring fashion primarily based on sure standards

This strategy offers us a versatile solution to management the looks of our textual content in React. With this information, you can begin to discover extra advanced styling and conditional rendering eventualities in your React purposes.