Allow to pass 'onRemove' on custom made Tokens (withToken/useToken)

Is your feature request related to a problem? Please describe. I created a custom Token using useToken on my functional component. I have no idea how to pass the onRemove function since my custom token is rendered like this (within the render() of my main component):

{this.state.selected.map((option, idx) => (
  <CustomToken
    key={idx}
    option={option}
    logo={option.logo}
    name={option.name}
  ></CustomToken>
))}

This is the CustomToken component:

const CustomToken = (props) => {
  return (
    <div
      {...useToken(props)}
      className="row w-50"
      option={props.option}
      onRemove={props.onRemove}
      >
      <div className="col">
        <img src={props.logo} style={{ width: 2 + "rem" }} />
      </div>
      <div className="col">{props.name}</div>
    </div>
  );
};

Of course I get Warning: Unknown event handler property onRemove. It will be ignored. By the way, in order to have my tokens rendered somewhere else (instead of in the input field), I’m using renderInput to decouple the two as seen here. This is my renderInput function:

renderInput = ({ inputRef, referenceElementRef, ...inputProps }) => {
  delete inputProps.inputClassName; //removes the not used inputClassName property
  return (
    <div>
      <input
        {...inputProps}
        className="form-control"
        ref={(input) => {
          inputRef(input);
          referenceElementRef(input);
        }}
        type="text"
      />
    </div>
  );
};

Describe the solution you’d like Since I’m positioning my CustomToken in a different place than inside the input bar, I would like to pass the onRemove function to a custom token.

How is this solution useful to others? This feature would allow for truly customizable Tokens.

[alexferrari88]

You are the best!! Thank you so much, it works!!

[ericgio]

@alexferrari88: Now you’re not applying useToken at all. You had the right idea before, you just weren’t handling the props correctly. If you look at the result of useToken, you’ll see it returns a bunch of props. Those need to be properly applied in your CustomToken:

const CustomToken = (props) => {
  const { active, onRemove, option, ...rest } = useToken(props);

  return (
    <div className="w-50" {...rest}>
      <img src={option.logo} style={{ width: 2 + "rem" }} />
      {props.children}
      <ClearButton
         className="rbt-token-remove-button"
         label="Remove"
         onClick={onRemove}
         tabIndex={-1}
       />
    </div>
  );
};