How to dynamically create a component tree in React based on an array that contains components?

Question

I have a components array.

const components = [
  A,
  B,
  C,
]

Then I want to render those components like this:

return (
  <A>
    <B>
      <C>
      </C>
    </B>
  </A>
)

But I can add a new component or switch the order of the components. I want to render this component tree in the same order as the components array.

So how can I dynamically create a component tree based on the components array?

Mulan · Accepted Answer · 2022-05-13 13:20:21Z

at least one

Write a recursive function, nest. At least one component is required -

const nest = ([T, ...more]) =>
  more.length == 0
    ? <T />
    : <T>{nest(more)}</T>

Use it in your components like this -

function MyComp(props) {
  return nest([A, B, C])
}

possibly zero

If you want the possibility to support an empty array, this is safest -

const nest = ([T, ...more]) =>
  T == null
    ? null
    : <T>{nest(more)}</T>

nest([]) // => null
nest([A,B,C]) // => <A><B><C/></B></A>

with props

If you want to supply props to the components, you can use a similar technique -

const nest = ([T, ...more], [p, ...props]) =>
  T == null || p == null
    ? null
    : <T {...p}>{nest(more, props)}</T>

nest([A,B,C], [{active: true}, {onClick: console.log}, {}])

<A active={true}>
  <B onClick={console.log}>
    <C />
  </B>
</A>

alternative

If props are needed, a better solution might be to colocate the props with the components using continuations -

const nest = ([T, ...more]) =>
  T == null
    ? null
    : T(nest(more))

nest([ 
  _ => <A active={true}>_</A>,
  _ => <B onClick={console.log}>_</B>,
  _ => <C/>
])

<A active={true}>
  <B onClick={console.log}>
    <C />
  </B>
</A>

1 Answer 1