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 <b></b> 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!
One way is to wrap the text to be bold in a <strong> tag, e.g.:
cardOne: {
description: "This text is <strong>bold</strong>.",
title: // ...
width: // ...
}
You can add <strong> or <b> 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 }} />