CODEWITHSUNDEEP
reactjsreact-props
Giulia
Giulia

Reputation: 807

Adding some bold text inside a text string passed as a prop to a component

I have a reusable component in React which I can pass a few very simple props to:

const Section1 = (props) => (
 <div className="section">
  <div className="container is-narrow">
    <div className="content is-medium"><h2 className="title is-1 is-bottom-bordered">{props.section1Title}</h2></div>
      <div className="columns">
        <div className="column is-half">
          <div className="content">
              <blockquote>{props.section1Blockquote}</blockquote> 
          </div>
        </div>
        <div className="column is-half">
          <div className="content">
            <p>{props.section1Text}</p>
          </div>
        </div>
      </div>
  </div>
</div>

When I use this component I pass the props like this:

<Section1
  section1Title="Example title"
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

Inside the strings that I pass as props, is it possible to style part of the text, making it bold? Not the entire string, just portion of it. In the example above, section1Blockquote, how can I make the word 'Example' bold?

Thanks a lot.

Upvotes: 3

Views: 6407

Answers (1)

Amit Chauhan
Amit Chauhan

Reputation: 6869

you should pass jsx to props so that you can use your own class or markup.

<Section1
  section1Title={<React.Fragment>Example <span className="bold">title</span></React.Fragment>}
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

in your css file.

.bold {
  font-weight: bold;
}

or you can use strong tag directly.

<Section1
  section1Title={<>Example <strong>title</strong></>}
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

update: instead of wrapping inside any html tag(span) we can use React.Fragment( shorthand <>) which will not create extra element outside.

Upvotes: 8

Related Questions