Improve wrapping of component name with displayName

[SamLeatherdale]

I noticed in my project some of my wrapped components were still displaying as Anonymous in React DevTools.

This is because they are using .displayName instead of .name for their name.
If you see React displayName docs, this describes how the displayName property is used. This is not generally hand set but is often set for you by build tools, especially when using arrow functions.

I noticed in my testing it wasn't enough to just use the displayName property for getting the name, but also setting the name on the resulting component, hence the change in two places.

This makes my DevTools much easier to read now.

[SamLeatherdale]

In the docs for Wrapping Display Name they actually recommend using displayName as higher priority than name:

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

However I put displayName as lower priority in my PR to preserve existing behaviour as much as possible.
Let me know if you'd like them swapped around to match the recommended order.

[garronej]

Hi @SamLeatherdale,
Thank you for the PR! sorry I am only reviewing it now, I am on vacation.

[garronej]

Hi @SamLeatherdale,
Thank you for your PR, it's a valuable contribution!
Would you change the base branch of this PR from main to v4.
The new version will be released soon, I'm not adding new features to v3.

BTW, I gave you write access on the project: https://github.com/garronej/tss-react/invitations

[SamLeatherdale]

I went ahead and updated the order of retrieving the name as per the React docs.
Let me know if you're happy for me to go ahead and merge it 😃