Sniberb
Sniberb14mo ago

⛄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
7 Replies
Unknown User
Unknown User14mo ago
Message Not Public
Sign In & Join Server To View
Nesho
Nesho14mo 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.
Unknown User
Unknown User14mo ago
Message Not Public
Sign In & Join Server To View
Nesho
Nesho14mo 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) 🙂
Sniberb
Sniberb14mo ago
thank you both
lebouwski
lebouwski14mo ago
if you're doing selectedModules?.some a bunch of times I'd convert it to a Set, then do set.has(name)
reactibot
reactibot14mo ago
This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1102857250369970177