Sniberb•16mo 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•16mo ago

Message Not Public

Nesho•16mo 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•16mo ago

Message Not Public

Nesho•16mo 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•16mo ago

thank you both

lebouwski•16mo ago

if you're doing selectedModules?.some a bunch of times I'd convert it to a Set, then do set.has(name)

reactibot•16mo 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