How do I edit facet option fields?

Search Search UI React
1

I’m trying to edit the facet options using the transformOptions prop on the <StandardFacet /> component like so:

<Facets>
  <StandardFacet
    fieldId="acceptingNewPatients"
    showOptionCounts={false}
    collapsible={false}
    transformOptions={(options: DisplayableFacet["options"]) => {
      console.log(options);
      options[0].displayName = "Yes";
      return [options[0]];
    }}
  />
</Facets>

I can’t edit displayName because it’s a read-only property. I was wondering if there was any way to edit these properties so they show properly on the frontend.

2

Hey Rohit,
The way I would do this is by defining a “transformAcceptingNewPatientsFacet” function like so:

const transformFieldFacet = (
    options: DisplayableFacet["options"]
  ): DisplayableFacet["options"] => {
    return options.map((option) => {

      let displayName = "Yes";
      
      return {
        ...option,
        displayName,
      };
    });
  };

This function maps through each option, and overrides it with the value you designate as the display name. Then you can just pass the function into the transformOptions prop like so:

<StandardFacet fieldId="yourField" transformOptions={transformFieldFacet} />

Let me know if that doesn’t help!

Best,

Daniel