Json Renderer - Copy this React, Tailwind Component to your project

Create a react component to render below json element use collapse if there are children else show list `` { "data": { "id": "", "name": "jsonInputName", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "organaisation", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "users", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "key", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": true, "schema": null, "operation": "" }, { "id": "", "name": "profile", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "name", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name1", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name2", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name3", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "organaisation1", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "users", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "key", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": true, "schema": null, "operation": "" }, { "id": "", "name": "profile", "dataType": "json", "isNullable": false, "defaultInput": null, "children": [ { "id": "", "name": "name", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name1", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name2", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" }, { "id": "", "name": "name3", "dataType": "string", "isNullable": false, "defaultInput": null, "children": null, "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": false, "schema": null, "operation": "" } ], "parentID": "", "isArray": false, "schema": null, "operation": "" }, "error": "", "status": true } ``