⛄Snowberb⛄ – 07-20 May 2

S⛄Snowberb⛄

5/2/2023

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

UUUnknown User

5/2/2023

3 Messages Not Public

NNesho

5/2/2023

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.

UUUnknown User

5/2/2023

2 Messages Not Public

NNesho

5/2/2023

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⛄Snowberb⛄

5/2/2023

thank you both

Llebouwski

5/2/2023

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

UUUnknown User

5/3/2023

Message Not Public

Looking for more? Join the community!

Reactiflux

⛄Snowberb⛄ – 07-20 May 2

Join Server

Reactiflux

⛄Snowberb⛄ – 07-20 May 2

Join Server

Want results from more Discord servers?

Add your server