Esta es la página html donde creo el objeto. Parte de la descripción debe estar en negrita:
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",
},
},
};
Este es el componente, donde paso la propiedad del objeto:
<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>
Intenté poner en <b></b> la parte que me gusta, intenté hacer getter y usar "esto" con la propiedad 'negrita', pero aún no puedo captar las words que me gusta que estén en negrita.{ ***} ¡Espero que la explicación esté bien y gracias de antemano!
Una forma es envolver el texto para que esté en negrita en una etiqueta <strong> , por ejemplo:
cardOne: {
description: "This text is <strong>bold</strong>.",
title: // ...
width: // ...
}
Puede agregar etiquetas <strong> o <b> alrededor de la parte de la descripción que desea resaltar.
cardOne: {
title: "Brief",
description: `Complete brief or <b>simple guidance</b> on what to include, we've got you covered`,
width: "430px"
};
Luego puede representar la descripción con dangerouslySetInnerHTML .
<p dangerouslySetInnerHTML={{ __html: cardOne.description }} />