PrimeReact AutoComplete Multi Custom Remove Token

PrimeReact is a great set of tools and patterns to make developing a project much faster.

From PrimeReact’s free offering, I was using their AutoComplete with Multiple Selections. Which works great.

Of course, I wanted to customize the remove button to make, and you might too. So here’s how I do it.

import { AutoComplete } from 'primereact/autocomplete';

function myAutoComplete(autocompleteRef, selectedTokenList, filteredTokens) {

    return (
          }
        />
    )
}

function RemoveTokenIcon({props}) {

  return (
    
 props.iconProps.onClick()}
      >✕
  )
}

I skipped a lot of the other settings that make it work, so that we can focus on the removeTokenIcon.

Basically, this just calls the component function, RemoveTokenIcon and sends in the IconType object supplied by AutoComplete. Just drill down into that object to get to the iconProps.onClick() function which is the remove function.