How to make some part of select list text bold and some normal font in React and Material Ui-CodePudding

I have to create a select list to show some product in a select. The list should show product name but there should be a count in bold text like this:
please see this image to understand the question

What I have tried is I am creating an array of the products and pushing my product in it along with product and count like this:

productInformation.push(currentProdName " (" cnt " Product" ")");

After that I am mapping it to json and binding it to select list like this:

var jsonProducts = productInformation.map(function (key, value) {
   return { value: key, label: key }
});


<Select  id="productName" name="productName" options={jsonProducts}  
   onChange={onSelectChange}  
   placeholder={"All Products (" supplierProducts.length   ")"} 
   ref={productInputRef}  
   styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} />

But by doing it this way, I am getting result like this: please see what currently i am achiving

How can I make count and product text bold in this?

CodePudding user response：

Import the "MenuItem" from the Mui library and use it as you would any other tag.

But before you should clean certain parts of your code before

productInformation.push({currentProdName, cnt});

var jsonProducts = productInformation.map(function (prod) {
   return <MenuItem value={prod.currentProdName  " ("   prod.cnt   " Product"   ")"}>{prod.currentProdName}<b>&nbsp;{ "("   prod.cnt   " Product"   ")"}</b></MenuItem>
});


<Select  id="productName" name="productName" onChange={onSelectChange}  
   placeholder={"All Products (" supplierProducts.length   ")"} 
   ref={productInputRef}  
   styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} >

  {jsonProducts}
</Select>

As you can see you'll have to fill the data in MenuItem and then add the object to the Select.
I changed how the information is pushed into the productInformation array (for better control)
Note: I removed jsonProducts from options and into the inside of Select tag.

CodePudding user response：

I am slightly out of my expertise area here on MUI and React but something like: (note I did not have access to your original JSON/JavaScript object for the p.count here but perhaps you can work with this:

<CustomSelect>
  <StyledOption value={}>"All Products ({supplierProducts.length})"</StyledOption>
  {jsonProducts.map((p) => (
  <StyledOption value={c.value}>
    {p.label} <span style="font-weight:bold;">({p.count}) Products</span>
  </StyledOption>
  ))}
</CustomSelect>

Reference: https://mui.com/components/selects/