I have been factoring my code and have decided that I need to build a few higher order components.

Why?

I have four components that are very similar and all require some data manipulations to be carried out on the props so I figure I can remove all this duplication with a higher order component that takes in the props , runs some functions and then presents the updated props to the components.

What I have done

To help me get my head around higher Order Functions I created a simple example and have put it into codesandbox.

AppSwitcher.js

I have also created a component called AppSwitcher.js that toggles between the app and specific components I am developing. I have found that this can be quite helpful for sandboxing new things in my app and thought I’d include it here in case anyone else find it useful. The flow of the app is like this

index.js -> AppSwitcher -> App.js or {Components to be tested}