How to render nested element in functional component?

Question

I am figuring out how to render multiple root elements in component and functional component is the solution, things are working fine for me but just not sure how to render nested element.

Please check comment in the code where I have described what's working for me.

export default {
  name: 'MyFnlComp',
  functional: true,
  render(createElement, { props }) {
    const itemIndex = props.item.index;
    const nestedEle = createElement('div', {}, 'nested element goes here');

    const catCard = createElement('div', {}, nestedEle); // this doesn't work :(
    const userCards = createElement('div', {}, 'Hey! this works'); // this works :)

    return [catCard, userCards];
  },

};

Answer 1

The last argument of createElement should either be a string or an array ..

const catCard = createElement('div', {}, [nestedEle]);