Dynamically nested React components

Question

I'm using the code below, and it does the job (for the moment). Depending on the length of the array, components are nested into each other with array-element reference as a prop. Inside the innermost element there must always be injected another element.

const arr = ['one', 'two', 'three'];
const injectedContent = <SomeContent />;

const renderNestedSections = () => {
  switch (arr.length) {
    case 1:
      return (
        <Section name={arr[0]}>
          {injectedContent}
        <Section>
      );

    case 2:
      return (
        <Section name={arr[0]}>
          <Section name={arr[1]}>
            {injectedContent}
          </Section>
        </Section>
      );

    case 3:
      return (
        <Section name={arr[0]}>
          <Section name={arr[1]}>
            <Section name={arr[2]}>
              {injectedContent}
            </Section>
          </Section>
        </Section>
      );

    default:
      return null;
  }
}

I'm struggling to make a function with algorithm that does the nesting dynamically. Any help will be much appreciated. Thanks in advance.

Khauri · Accepted Answer · 2018-06-16 15:06:42Z

3

Here's something off the top of my head. Maybe there's a better/clearer way to do this, but the idea is that you iterate through each item in the array and build outward, wrapping each Section inside another Section.

To do this Array#reduce is used starting with an accumulator value of your injected content. Then you simply build upwards towards the outermost Section. Also, because we're building outwards rather than inward, we must reverse the array (keep in mind that this will mutate the array so you might want to clone it before doing this).

Here's a proof of concept using DOM rather than React.

let arr = ['one', 'two', 'three']
// Inner Content
let content = document.createElement('div')
content.innerHTML = "Hello World"

// Algorithm
let res = arr.reverse().reduce((acc, item)=>{
  let a = document.createElement('div')
  a.classList.add(item)
  a.appendChild(acc)
  return a
}, content)

document.body.appendChild(res)

div {
  padding : 10px;
  color : white;
}

.one {
  background-color: red;
}
.two {
  background-color: green;
}
.three {
  background-color: blue;
}

Here's how I think the React version would look, but I haven't tested it.

const arr = ['one', 'two', 'three'];
const injectedContent = <SomeContent />;

// Algorithm
let result = arr.reverse().reduce((acc, item)=>{
  return (
    <Section name={item}>
      {acc}
    </Section>
  )
}, InjectedContent)

answered Jun 16, 2018 at 15:06

Khauri

3,8731 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ibechev Over a year ago

I've tested it and it works perfectly. Very compact solution, thanks again!

Lafi · Accepted Answer · 2018-06-16 15:49:05Z

0

this is a recursive and declarative react component :

const RecursiveNodeWrapper = ({ layers, node }) => {
  let accumulatedNode = node;
  if (layers.length) {
    const [currentLayer, ...restLayers] = layers;
    accumulatedNode = (
      <section style={{ border: '1px solid', padding: 5 }} name={currentLayer}>
        {accumulatedNode}
      </section>
    );
    return RecursiveNodeWrapper({
      layers: restLayers,
      node: accumulatedNode,
    });
  }
  return accumulatedNode;
};

then you just need to call it like regular component:

<RecursiveNodeWrapper layers={['one', 'two']} node={<h1>hello</h1>} />

answered Jun 16, 2018 at 15:49

Lafi

1,3521 gold badge16 silver badges19 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2018-06-16 15:56:42Z

You can use a recursive rendering approach like

const arr = ["one", "two", "three", "four"];
const injectedContent = () => <SomeContent />;

const Section = ({ name, children }) => (
  <div>
    <div>{name}</div>
    {children}
  </div>
);

const SomeContent = () => <div>Some Content</div>;

const RecursiveContent = ({ InjectedContent, arr }) => {
  const name = arr[0];

  return (
    <Section arr={arr} name={name}>
      {arr.length > 0 ? (
        <RecursiveContent arr={arr.slice(1)} InjectedContent={InjectedContent} />
      ) : (
        <InjectedContent />
      )}
    </Section>
  );
};
const NestedSection = InjectedContent => ({ arr }) => (
  <RecursiveContent arr={arr} InjectedContent={InjectedContent} />
);

function App() {
  return (
    <div className="App">
      <NestedEle arr={arr} />
    </div>
  );
}

const NestedEle = NestedSection(injectedContent);

Working sandbox

Collectives™ on Stack Overflow

Dynamically nested React components

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related