I have the following map inside my React js file which i am mapping to a select dropdown.
const options = response.map(k => ({
value: k.id,
label: k.description ? `${k.name} - ${k.description}` : k.name,
}));
I need to either add a div or apply inline style only to ${k.name} value. for example i want ${k.name} to be bold and apply higher font-size value. what is the best way to do this?
Expected Output : https://nimb.ws/sb70xu
Thanks in advance
Presuming you already have an Option component, you should be able to create a component that accepts the items from the given response as props
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,
}));