CODEWITHSUNDEEP
javascriptvue.jsvue-functional-component
Syed
Syed

Reputation: 16513

How to render nested element in functional component?

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];
  },

};

Upvotes: 0

Views: 747

Answers (1)

Husam Elbashir
Husam Elbashir

Reputation: 7177

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

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

Upvotes: 2

Related Questions