I have seen the object mapper pattern heavily overused in a client’s codebase.

The issue is that you can either render a component like so:

`<SuccessButton />`, `<ErrorButton />`

Or you can render it something along these lines:

`components[‘success’]`, `components[‘error’]`

You can also lose TS/Flow typings along the way.

There are times you may actually want to use such a pattern, but most of the time you don’t and it’s much simpler to just write the actual component rather than passing a string to a god component you’ve created that will spit out any of 10 different options. Not to mention, in the case that the key is missing in your `objectMapper`, what I’d actually like to see happen is a clear red error from my linter that SuccessButton is undefined. Rather than have it return null because I did components.success.

There may be times you want to generate components from a config file, but most of the time you don’t and better to write the actual code and stick with idiomatic React components.

Written by

Founder: Skilled.co.il & Draft Fantasy. Full stack JavaScript Engineer. https://elie.tech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store