Rendering React Components in a Specified Order

Question

Having a bit of a hard time finding anything about this specific pattern, and I'm not even exactly sure how to describe it in search terms so apologies if this is a duplicate question (although I don't think it is).

I want to output a React layout based on an order passed to the app that the user can set via a settings panel. The idea is that there are a few different containers to output on the page that I want the user to be able to re-arrange. It's important to note that this order is not changeable after the app renders. (I want the user to be able to say "Show me PanelA, PanelC and PanelB in that order")

Now, I've figured out how to accomplish this using the following pattern:

// user-ordered array is passed to the app:
    const settings = {
        layout: [
            "panela",
            "panelb",
            "panelc"
        ]
    }

    class MyComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                // some state
            }
        }
        renderComponentsInOrder() {
            return settings.layout.map(component => {
                switch(component) {
                    case "panela":
                        return 
                            <PanelA {.../* some state */} />
                    case "panelb":
                        return 
                            <PanelB {.../* some state */} />
                    case "panelc":
                        return 
                            <PanelC {.../* some state */} />
                    default: return null
                }
            })
        }

        render() {
            return this.renderComponentsInOrder()
        }
    }

but this strikes me as really inefficient. The order of the components shouldn't need to be re-calculated every time render runs because the order won't change while the app is running. I've tried doing things like memoizing the renderComponentsInOrder method to cache the calculated layout or renaming the values in the settings.layout array and calling them directly, but haven't been able to get anything to work because the components need to update based on state.

Any help or advice would be greatly appreciated. Thanks!

EDIT: Ideally I'm looking for a JS-based solution as compatibility is a bit of an issue and I don't want to rely solely on the browser's implementation of CSS.

Is this order purely for visual reasons? As you can control the order via CSS and just render it in any DOM order. CSS will rearrange it for you. It's easy with grid layouts. — Reactgular, Jan 10 '18 at 20:24
I wanted to recommend the same, a css grid would be perfekt for this. — modmoto, Jan 10 '18 at 20:25
The same problem applies though no? Assuming the layout is determined by js, then OP still needs to generate css or apply styles to the elements to control said order. — Evan Trimboli, Jan 10 '18 at 20:52
Do you need to pass different props to each panel? Or are they the same? — Evan Trimboli, Jan 10 '18 at 21:17

Evan Trimboli · Accepted Answer · 2018-01-11T05:04:21.560

5

A slightly different take on the answer given by Brandon. You could have a function to generate the component based on the state/props:

const settings = {
    layout: [
        "panela",
        "panelb",
        "panelc"
    ]
};

const panels = settings.layout.map(c => {
  switch (c) {
    case "panela": return (props, state) => <PanelA key="a" foo={state.foo} />
    case "panelb": return (props, state) => <PanelB key="b" bar={state.bar} />
  }
});

// Now use panels array to render:

class MyComponent extends React.Component {
  render() {
    const props = this.props;
    const state = this.state;
    const ordered = panels.map(p => p(props, state));

    return <div>{ordered}</div>
  }
}

edited Jan 11 '18 at 05:04

answered Jan 10 '18 at 22:49

Evan Trimboli

29,900
6
45
66

Perfect! The only thing missing is `return`s in the switch cases – Dan Haddigan Jan 11 '18 at 04:19
Indeed, fixed. Thanks. – Evan Trimboli Jan 11 '18 at 05:04

score 2 · Answer 2 · answered Jan 10 '18 at 21:48

Method 1:

Just transform the settings array into an array of Components once before you render:

const settings = {
        layout: [
            "panela",
            "panelb",
            "panelc"
        ]
    };

const panels = settings.layout.map(c => {
  switch (c) {
    case "panela": return { Component: PanelA, key: c };
    case "panelb": return { Component: PanelA, key: c };
    ...
  }
});

// Now use panels array to render:

class MyComponent extends React.Component {
  // ...
  renderComponentsInOrder() {
    return panels.map(({Component, key}) => (
      <Component key={key} {.../* some state*/} />
    ));
  }

  // ...
}

Method 2:

Just create a mapping table:

const settings = {
        layout: [
            "panela",
            "panelb",
            "panelc"
        ]
    };

const panelLookup = {
  "panela": PanelA,
  "panelb": PanelB,
   ...
};

// Now use lookup to render:
// Now use panels array to render:

class MyComponent extends React.Component {
  // ...
  renderComponentsInOrder() {
    return settings.layout.map(key => {
      const Component = panelLookup[key];
      return <Component key={key} {.../* some state*/} />;
    });
  }

  // ...
}

I like the simplicity of Method 2, but I don't think it's viable for my use case because I need to pass different props to each of the panel components. — Dan Haddigan, Jan 10 '18 at 22:31

Rendering React Components in a Specified Order

2 Answers2

Linked