How to useInline Conditional Rendering in ReactJS
- In this approach, the text is split into smaller parts based on the target text.
- JSX’s inline conditional rendering is then utilized to iterate through these parts.
- During the rendering process, if a part is not the final one, the target text is enclosed in a
<strong>tag with an inline style for boldness. - This approach provides a precise and controlled way to enhance the appearance of specific text within the content.
Example 1:
Javascript
// App.jsimport React from 'react';function BoldText(props) { const { text, boldText } = props; const parts = text.split(boldText); return ( <p> {parts.map((part, index) => ( <React.Fragment key={index}> {part} {index !== parts.length - 1 && <strong style={{ fontWeight: 'bold' }}> {boldText} </strong>} </React.Fragment> ))} </p> );}function App() { return ( <div style={styles.container}> <h1 style={styles.heading}>w3wiki</h1> <BoldText text="A Computer Science portal for geeks. It contains well written, well thought and well explained Computer Science and programming articles" boldText="Computer" /> </div> );}export default App;const styles = { container: { textAlign: 'center', margin: '50px auto', padding: '20px', border: '2px solid #333', borderRadius: '5px', backgroundColor: '#f5f5f5', maxWidth: '400px', boxShadow: "0px 0px 10px 0px grey", }, heading: { color: "green", fontSize: 26, }} |
Start Your application using the following command:
npm start
Output:
How to create Bold Specific Text In React JS ?
ReactJS has emerged as one of the most widely adopted JavaScript libraries for designing user interfaces. They often encounter scenarios that demand specialized text styling capabilities. This includes the need to emphasize certain words or phrases by applying bold formatting. In this article, we’ll see how to bold specific text in React.
When it comes to enhancing the visual appeal and readability of text, adding emphasis through bold formatting plays a crucial role. It allows for highlighting keywords, emphasizing important information, or simply making content stand out.
In ReactJS, achieving this effect requires understanding the syntax and exploring various available approaches such as:
Table of Content
- 1: Using Inline Conditional Rendering
- 2: Using the dangerouslySetInnerHTML prop in React.
Syntax:
<strong>Some bold text</strong>