Tengo el siguiente mapa dentro de mi archivo React js que estoy asignando a un menú desplegable de selección.
const options = response.map(k => ({ value: k.id, label: k.description ? `${k.name} - ${k.description}` : k.name, })); Necesito agregar un div o aplicar un estilo en línea solo al valor de ${k.name} . por ejemplo, quiero que ${k.name} esté en negrita y aplique un valor de tamaño de fuente más alto. ¿Cuál es la mejor manera de hacer esto?
Salida esperada: https://nimb.ws/sb70xu
Gracias por adelantado
Suponiendo que ya tiene un componente de opción, debería poder crear un componente que acepte los elementos de la respuesta dada como accesorios
const Options: React.FC<Data> = ({ id, name, description }) => ( <Option value={id}> <span className="yourClassHere">{name}</span> {description && ( <span>- {description}</span> )} </Option> ) const options = response.map(option => <Options {...option} />);const options = response.map(k => ({ value: k.id, label: k.description ? `${<span style={{fontWeight: "bold"}}>k.name</span>} - ${k.description}` : k.name, }));