0
220
ViewsHow to make some part of select list text bold and some normal font in React
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:
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: 
How can I make count and product text bold in this?
3 answers
Answer question0
As you are mapping jsonProducts from productInformation array
i would suggest
let content = (<div >{ProductName}<b> {" (" + Count+ " Product" + ") "}</b></div>);
productInformation.push(content);
now map it as it is
var jsonProducts = productInformation.map(function (key, value) {
return { value: key, label: key }
});
0
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/
0
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> { "(" + 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.