Applying style to value in an object in React JS-CodePudding

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

CodePudding user response：

const options = response.map(k => ({
          value: k.id,
          label: k.description ? `${<span style={{fontWeight: "bold"}}>k.name</span>} - ${k.description}` : k.name,
        }));

CodePudding user response：

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} />);

TS Playground

MUI exmaple