I want to render dynamic component But I cannot able to render children component nextcomp[]. currently only first component Text rendering.

const item = [{
    component: "text",
    label: "Name",
    Type: "text",
    nextComp: [{
        component: "checkbox",
        label: "yes",
        question: "Do you Play football",
        type: "checkbox",
    }, {
        component: "text",
        label: "Age",
        Type: "text",
        nextComp: [{
            component: "checkbox",
            label: "yes",
            question: "Do you Play football",
            type: "checkbox",
        }, {
            component: "text",
            label: "Gender",
            Type: "text",
        }],
    }],
}, ]

App.js I mapped like

{item.map(block => Components(block))}

I am rendering component like

const Components = {
      Text: Text,
      checkbox: Checkbox
    };
    
export default block => {
  if (typeof Components[block.component] !== "undefined") {
    return React.createElement(Components[block.component], {
      key: block,
      block: block
    });
  }
  return React.createElement(
    () => <View>The component {block.component} has not been created yet.</View>,
    { key: block}
  );

};

CodePudding user response：

I think I sort of understand what you are going for here. I don't see where your recursive renderer function recurses on the block.nextComp array.