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 (
        <AutoComplete 
            multiple 
            ref={autoCompleteRef}
            value={selectedTokenList} 
            suggestions={filteredTokens} 
        
            ...

            removeTokenIcon={(props) => <RemoveTokenIcon props={props}/> }
        />
    )
}

function RemoveTokenIcon({props}) {

  return (
    <div 
      className='...'
      onClick={() => props.iconProps.onClick()}
      >✕</div>
  )
}

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<AutoCompleteProps> object supplied by AutoComplete. Just drill down into that object to get to the iconProps.onClick() function which is the remove function.