⛄Snowberb⛄ – 07-20 May 2

What would be a better way to do this? I thought about having an object that gets accessed by a key, but im not sure if that's the best for JSX
UU
Unknown User352d ago
N
Nesho352d ago
I would define an object of all possible keys and their components
const components = {
'COST_AND_EXPENSES': CostAndExpenses,
'SELECTED_PORTFOLIOS': Portfolios,
...,
...,
...
};
const components = {
'COST_AND_EXPENSES': CostAndExpenses,
'SELECTED_PORTFOLIOS': Portfolios,
...,
...,
...
};
Then you can simply map over the selected modules and index then components object
selectedModules.map((m) => {
const Component = components[m];
return <Component />;
})
selectedModules.map((m) => {
const Component = components[m];
return <Component />;
})
This would get rid of the nested loop as well This is a common pattern when dealing with React, it's very close to the strategy pattern, but without fancy class implementations.
UU
Unknown User352d ago
N
Nesho352d ago
The object shouldn't care about order, it's simply a configuration object. If order is important, selectedModules should deal with that The object is just for indexing. If the user wishes to be able to re-order in the UI, selectedModules should be the array that's re-ordered. If you re-order the array, it will "just work" because mapping is just iteration and is done in order (but you know this) 🙂
S
Sniberb352d ago
thank you both
L
lebouwski352d ago
if you're doing selectedModules?.some a bunch of times I'd convert it to a Set, then do set.has(name)
UU
Unknown User351d ago