React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Ravindra Athreya

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Hello extends React.Component {
constructor(props) {
	super(props);
  this.state = {
  	response: {
  "status": "SUCCESS",
  "responseCode": null,
  "responseText": null,
  "stateId": null,
  "messageParams": null,
  "workflowInstanceId": 2229329623,
  "approvals": null,
  "workflowView": {
    "workflowInstanceId": 2229329623,
    "workflowComplete": false,
    "pendingTasks": [
      "FA Approval"
    ],
    "pendingRoles": [
      "Financial Analyst"
    ],
    "nodes": [
      [
        {
          "stepId": 0,
          "stepName": "BA Approval",
          "actorId": 999999000165712300,
          "actorGroup": "Business Analyst",
          "modified": "2019-10-28 11:41:26",
          "actorName": "rins-test3",
          "state": "APPROVED",
          "pendingStepName": null,
          "parentStepName": null,
          "conditions": null
        },
        {
          "stepId": 0,
          "stepName": "FA Approval",
          "actorId": 999999000165712600,
          "actorGroup": "Business Manager",
          "modified": "2019-10-28 12:11:50",
          "actorName": "rins-test5",
          "state": "PENDING",
          "pendingStepName": null,
          "parentStepName": "BA Approval",
          "conditions": [
            {
              "type": "LONG",
              "variable": "amount",
              "threshold": "100000",
              "operator": "<="
            }
          ]
        },
        {
          "stepId": 501,
          "stepName": "DC Approval",
          "actorId": 999999000165712300,
          "actorGroup": "Business Analyst",
          "modified": "2019-10-28 11:38:54",
          "actorName": "rins-test3",
          "state": "PENDING",
          "pendingStepName": null,
          "parentStepName": "FA Approval",
          "conditions": [
            {
              "type": "LONG",
              "variable": "amount",
              "threshold": "100000",
              "operator": ">"
            },
            {
              "type":...