{"ScriptPreparationCode":"function Greeting({ name, age }) {\r\n return React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n React.createElement(\u0027h1\u0027, null, \u0027Hello \u0027, name),\r\n React.createElement(\u0027p\u0027, null, \u0027some text\u0027),\r\n React.createElement(\u0027p\u0027, null, \u0027some text\u0027),\r\n React.createElement(\u0027p\u0027, null, \u0027some text\u0027),\r\n React.createElement(\u0027p\u0027, null, \u0027some text\u0027),\r\n React.createElement(\u0027div\u0027, null, age)\r\n );\r\n}\r\n\r\nfunction NonRecursiveRenderer({ userData }) {\r\n return React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n userData \u0026\u0026\r\n userData.map(({ name, age, child }) =\u003E\r\n React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n Greeting({ name, age }),\r\n child \u0026\u0026\r\n child.map(({ name, age, child }) =\u003E\r\n React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n Greeting({ name, age }),\r\n child \u0026\u0026\r\n child.map(({ name, age, child }) =\u003E\r\n React.createElement(\u0027div\u0027, null, Greeting({ name, age }))\r\n )\r\n )\r\n )\r\n )\r\n )\r\n );\r\n}\r\n\r\nfunction RecursiveRenderer({ userData }) {\r\n return React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n userData \u0026\u0026\r\n userData.map(({ name, age, child }) =\u003E\r\n React.createElement(\r\n \u0027div\u0027,\r\n null,\r\n Greeting({ name, age }),\r\n child \u0026\u0026 child.map((childData) =\u003E RecursiveRenderer(childData))\r\n )\r\n )\r\n );\r\n}\r\n\r\nfunction RenderNonRecursively({ userData }) {\r\n return React.createElement(NonRecursiveRenderer, { userData: userData });\r\n}\r\n\r\nfunction RenderRecursively({ userData }) {\r\n return React.createElement(RecursiveRenderer, { userData: userData });\r\n}\r\n","TestCases":[{"Name":"Recursive rendering","Code":"const userData = [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027, child: [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027}]},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027, child: [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027}]}]\r\nReactDOM.render(React.createElement(RenderRecursively, {userData: userData}), document.getElementById(\u0027root\u0027))","IsDeferred":false},{"Name":"Non recursive rendering","Code":"const userData = [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027, child: [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027}]},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027, child: [{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027},{name: \u0027a\u0027, age: \u00272\u0027}]}]\r\nReactDOM.render(React.createElement(RenderNonRecursively, {userData: userData}), document.getElementById(\u0027root\u0027))","IsDeferred":false}]}