How to make bold part of text , passed from object to react component?-CodePudding

This is the page html where I create the object. Part of description must be bold:

const agencyProps = {
  title: "Managed agency selection",
  paragraph: "Strengten your onboarding process",
  videoImage: {
    src: "/img/video.png",
    alt: "background",
    width: 330,
    height: 520,
  },

  selections: {
    cardOne: {
      title: "Brief",
      bold: "THIS",
      description: `Complete brief or simple guidance on what to include, we've got you covered`,
      width: "430px",
    },

    cardTwo: {
      title: "Search",
      description:
        "In-depth agency search covering, criteria matching, door knocking and due-dilligence vetting.",
      width: "460px",
    },

    cardThree: {
      title: "Pitch",
      description:
        "Comprehensive pitch management, including comms, diary management and pitch hosting.",
      width: "490px",
    },
  },
};

This is the component, where I pass the object property:

<StyledCard style={{ maxWidth: `${selections.cardTwo.width}` }}>
              <StyledIconWrapper>
                <FaSearch size="1x" color="#0f0f0f" />
              </StyledIconWrapper>
              <StyledTitleDescriptionWrapper>
                <StyledSelectTitle>
                  {selections.cardTwo.title}
                </StyledSelectTitle>
                <StyledSelectDescription>
                  {selections.cardTwo.description}
                </StyledSelectDescription>
              </StyledTitleDescriptionWrapper>
            </StyledCard>

I've tried to put in  the part which I like, tried with making getter and using "this" with property 'bold' but still cant manage to catch the words which i like to be bold. Hope explanation is ok and thanks in advance!

CodePudding user response：

One way is to wrap the text to be bold in a  tag, e.g.:

cardOne: {    
    description: "This text is <strong>bold</strong>.",
    title: // ...
    width: // ...
}

CodePudding user response：

you have to use   tag and pass that to dangerouslySetInnerHTML more information on this page

CodePudding user response：

You can add  or  tags around the part of the description you want bolded.

cardOne: {
    title: "Brief",
    description: `Complete brief or <b>simple guidance</b> on what to include, we've got you covered`,
    width: "430px"
  };

Then you can render the description with dangerouslySetInnerHTML.

<p dangerouslySetInnerHTML={{ __html: cardOne.description }} />

CodePudding user response：

You can set the description to a React fragment and use the  element to wrap the bold text.

cardTwo: {
  title: "Search",
  description:
    <>In-depth agency search <strong>covering</strong>, criteria matching, door knocking and due-dilligence vetting.</>,
  width: "460px",
},