How to display key value pairs from nested object

Question

I have this structure of data (its more nested, but I give you example of it)

{
 status: {
    observedGeneration: 2,
    replicas: 1,
    updatedReplicas: 1,
    readyReplicas: 1,
    availableReplicas: 1,
    conditions: [
      {
        type: "Progressing",
        status: "True",
        lastUpdateTime: "2022-02-25T09:28:17Z",
        lastTransitionTime: "2022-02-25T09:19:35Z",
      },
      {
        type: "Available",
        status: "True",
        lastUpdateTime: "2022-09-06T02:03:09Z",
        lastTransitionTime: "2022-09-06T02:03:09Z",
      }
    ]
  }
settings: {
    observedGeneration: 2,
    replicas: 1,
    updatedReplicas: 1,
    readyReplicas: 1,
    availableReplicas: 1,
    conditions: [
      {
        type: "Progressing",
        status: "True",
        reason: "NewReplicaSetAvailable",
        message: "ReplicaSet \"label-studio-546655c5cc\" has successfully progressed.
      },
      {
        type: "Available",
        status: "True",
        reason: "MinimumReplicasAvailable",
        message: "Deployment has minimum availability."
      }
    ]
  }
}

How I can iterate over this to display in React structure like key value pairs. For example:

This output is only example, but what I want to display is

`key`: `value`
`key`: `value'
`key`:
   `key`:`value`

name: Mathew
seetting:
  label: 1
  composie: yes
  additionalSetting:
    performance: no
    ready: onlyData
version: 123
mountPath: replices

I just was thinking about recursion function, but after many hours of struggling I think I need a little bit of help :)

Thank you so much for any solutions :)

Answer 1

As suggested in comment you can use a tree structure with primitive values as leaf. See this codesandbox for an example of such structure.