Change font weight to bold for a drop down value in reactjs

Question

I have the following code in return. It is creating a drop down values. I want to change the font weight of the drop down value for ${status} and ${dataIdText} to bold

   <Modal.Body className="container-fluid">
  <div className='row'>
    <label className='col-sm-4' htmlFor='portalSelector'>Exiting item: </label>
    <select className='col-sm-8' id='portalSelector' onChange={this.onSelectionChange} value={this.state.selectedItem}>
      <option key='-1' label='--Make a selection--' value='-1' />
      {((dataId === '') ? stateVar : stateVar.filter((val)=> (val.dataId +"") === dataId )).map((p, index) => {
        const status = p.status === 'PENDING' ? '' : p.status === 'SENT'?'':'Unscheduled'
        const dataIdDef = datasets.filter((val)=> val.dataId === p.dataId )[0]

        const dataIdText = p.dataId === -1? '' : `${dataIdDef.dataIdname} - `

        const scheduleDtText = p.scheduleDt === 5711817600000 ? '' : 'scheduled for ' + moment(p.scheduleDt).format('DD/MM/YYYY HH:mm')
        return (<option 
          className='data'
          key={index} 
          value={index}               
          label={`${status} ${dataIdText} ${p.title} ${scheduleDtText}`}>

        </option>)
      }
      )}
    </select>
  </div>
</Modal.Body>

I have tried to remove the label property and place the text inside Options tag itself but no luck.

Mickey · Answer 1 · 2019-08-26T15:25:23.043

Last Edit

Turns out this may not be possible. The answer to "How to style the option of an html "select" element?" back in 2011 pointed that out, and it appears that's still true.

Mozilla's <option> HTML element docs, for example, say the only permitted content in the tag is "Text, possibly with escaped characters (like é)."

I won't remove the solutions I started off proposing, because they all seem like simple solutions to a simple problem, but it turns out it's not a simple problem at all (unless someone would care to correct me).

End Last Edit

Initial answer

Try passing the label a functional component rather than a string

return (<option
    className='data'
    key={index} 
    value={index}
    label={() => (
         <span><strong>{status} {datasetIdText}</strong> {p.title} {scheduleDtText}</span>
    )}
    </option>
)

Edit in response to question update

Is there a reason for you to need the string formatted in the "label" prop? It almost seems too obvious, so I apologize in advanced if you've already done this or it isn't an option, but why not just place the label in the option tag itself?

<option 
    className='data'
    key={index} 
    value={index} 
    // label={`${status} ${p.type} ${dataIdText}${scheduleDtText}`}
>
    {/* move label here */}
    <strong>{status} {dataIdText}</strong> {p.title} {scheduleDtText}
</option>

It is showing as [object object] in the drop down, not the proper value — Subhajit Pal, Aug 22 '19 at 17:16
My bad, that's not an unexpected error. I've updated my answer to address it, replacing the tag with a functional component. If that still doesn't work, please update your question to show how you're rendering the `label` prop. — Mickey, Aug 22 '19 at 19:56
It is not working. I have edited my question with the code details — Subhajit Pal, Aug 23 '19 at 07:51
Thanks for the additional detail, I've updated my answer again. — Mickey, Aug 23 '19 at 16:03
When I tried to move out the label in the option tag itself it is showing the following error "Only strings and numbers are supported as — Subhajit Pal, Aug 26 '19 at 08:00

score 0 · Answer 2 · answered Aug 22 '19 at 20:04

0

try this shape

  label={()=>( <span className="bold">{status}<span className="bold"> {datasetIdText}<span/> {p.title} {scheduleDtText}`}>

answered Aug 22 '19 at 20:04

Mohammed Al-Reai

2,344
14
18

When I am trying to pass a component it showing Invalid value for prop `label` on – Subhajit Pal Aug 23 '19 at 09:05

Change font weight to bold for a drop down value in reactjs

2 Answers2