Search code examples
reactjsreact-dom

Conditionally change order of rendering React component

I have three component <Header /> <Body /> <Footer />. I want to change the order of display according to condition as below.

<div> <Header /> <Body /> <Footer /> </div>

or

<div>  <Body /> <Header /> <Footer /> </div>

or some different order according to some new condition.

Solution

  • we can put components in an array on whatever order we want then we can render as below.

    class Layout extends React.Component {
  render() {
    let componentsOrder = [];
    componentsOrder = isEnabled('renderBottom') ? [<List />, <AddToDo />] : [<AddToDo />, <List />]
    componentsOrder = isEnabled('filter') ? [...componentsOrder, <Filter />] : [...componentsOrder]
    return (
      <div>
        {componentsOrder.map((v, i) => <div key={i}>{v}</div>)}
      </div>
    )
  }
}