CODEWITHSUNDEEP
javascriptcsshtmlreactjs
jdip88
jdip88

Reputation: 447

What is the best way to make certain text in a paragraph prop bold in react?

I am dropping paragraphs into a reusable component, but certain words in each different instance of that component are bold. What is the best way to be able to bold those certain unique words ?

class Recommendations extends Component{
    constructor(){
        super();
    }

    render(){
        let { mainHeader, secondaryHeader, paragraph1, paragraph2, photoClass } = this.props;
        return (
            <div className="mainRecommendationContainer">
                <div class="recommendationContainer">
                    <div className="headerContainer">
                        <h1>{mainHeader}</h1>
                        <h2>{secondaryHeader}</h2>
                    </div>
                    <p>{paragraph1}</p>
                    <p>{paragraph2}</p>
                </div>
                <div className={photoClass}>

                </div>
                <Link to={`/`} activeClassName="active">  <div className="homeButton"></div></Link>
                <Link to={'/'} activeClassName="active"><div className="back"></div></Link>
            </div>
        )
    }
}

export default Recommendations

here is the prop and i tried to do string interpolation to make it bold, but the actual <b>example</b> were displayed

      <Recommendations
      mainHeader={'Almost perfect!'.toUpperCase()}
      secondaryHeader={'You’ve Got Very Little Damage!'.toUpperCase()}
      paragraph1={`Your hair is pretty healthy, but daily ${'example'.bold()} at the ends of your hair can make sure itfeels awesome!`}
  />

Upvotes: 0

Views: 1405

Answers (1)

King Rui
King Rui

Reputation: 321

You can use dangerouslySetInnerHTML, here's the demo: https://codesandbox.io/s/q90nz5l184

class Recommendations extends React.Component {
  constructor() {
    super();
  }

  render() {
    let { mainHeader, secondaryHeader, paragraph1, paragraph2, photoClass } = this.props;
    return (
      <div className="mainRecommendationContainer">
        <div class="recommendationContainer">
          <div className="headerContainer">
            <h1>{mainHeader}</h1>
            <h2>{secondaryHeader}</h2>
          </div>
          <p dangerouslySetInnerHTML={{__html: paragraph1}} />
          <p>{paragraph2}</p>
        </div>
        <div className={photoClass}>
        </div>
      </div>
    )
  }
}

Upvotes: 1

Related Questions