React HOC to render a wrapped component with a given key

KeyOn.ts

/**
 * Higher Order Component that renders the wrapped component with the given key (derived from its
 * props), which allows us to easily "reset" a component if certain props change.
 * @param component
 * @param getKey
 */
export function KeyOn<P>(component: React.ComponentType<P>, getKey: (props: P) => string) {
  const displayName = `KeyOn(${component.displayName})`;
  const hoc = (props: P) => {
    const key = getKey(props);
    return React.createElement(component, { ...props, key });
  };
  hoc.displayName = displayName;
  return hoc;
}