How to set the value of react select by using getOptionLabel

1.4k Views Asked by At

I have the below react select component

<Select
          options={ fields }
          getOptionLabel={ val => ( isSorted ? activeSortObject.field.name : val.name ) }
          getOptionValue={ val => ( isSorted ? activeSortObject.field.id : val.id ) 
        />

here fields is returned as an object which looks like

name: "Progress"
id: "progress-column-uuid"
editable: true
hidden: false
data_type: "boolean"

This is why I have used getOptionLabel and getOptionValue over value prop of select. Now I receive a prop called activeSortObject which has the following object

{ field: 
  {
    name: "Progress"
    id: "progress-column-uuid"
   editable: true    
   hidden: false
   data_type: "boolean"
  }, 
order: {"Ascending"}, 
isSorted: true
}

I need to prefill the select label by the activeSort name and id object. I can do that using the value prop in select but since this is not in the form {label, value} and I cannot afford to do that processing can someone suggest me how to prefill it here. I would want to prefill the selects label with name attribute in activeSort and still be able to select from the dropdown.

0

There are 0 best solutions below