Render Objects within objects in React

Question

I have a some data I want to display but I'm finding it difficult to render it out to a table because the object has many layers. as you can see it has items in some of the fields and some do not.

Data: {
            'Current Assets': {
              name: 'Current Assets',
              value: 10000.62,
              items: [
                {
                  name: 'Bank',
                  value: 1600.11,
                  items: [
                    {
                      name: 'hello',
                      value: -65.43,
                    },
                    {
                      name: 'Business Bank Account',
                      value: 1760.54,
                    },
                  ],
                },
                {
                  name: 'Accounts Receivable',
                  value: 9222.51,
                },
              ],
            },
            'Fixed Assets': {
              name: 'Fixed Assets',
              value: 4600.28,
              items: [
                {
                  name: 'Computer Equipment',
                  value: 3700.49,
                },
                {
                  name: 'Office Equipment',
                  value: 900.79,
                },
              ],
            },
            name: 'Assets',
            value: 15007.9,
          },

Answer 1

Don't know what exacly you're are looking for but I tried to reproduce your issue and made some changes in it. Below is the code:

import { useEffect } from "react";

const Data = {
  'Current Assets': {
    name: 'Current Assets',
    value: 10000.62,
    items: [
      {
        name: 'Bank',
        value: 1600.11,
        items: [
          {
            name: 'hello',
            value: -65.43,
          },
          {
            name: 'Business Bank Account',
            value: 1760.54,
          },
        ],
      },
      {
        name: 'Accounts Receivable',
        value: 9222.51,
      },
    ],
  },
  'Fixed Assets': {
    name: 'Fixed Assets',
    value: 4600.28,
    items: [
      {
        name: 'Computer Equipment',
        value: 3700.49,
      },
      {
        name: 'Office Equipment',
        value: 900.79,
      },
    ],
  },
  name: 'Assets',
  value: 15007.9,
}



function App() {

  return (
    <ul>
      {Object.values(Data).map((val) => (
        <>
        {val.name && <h3>Name : {val.name}</h3>}
        {val.value && <h3>Value : {val.value}</h3>}
        {val.items && val.items.map(val2 => (
          <table style={{border:"1px solid black"}} >
            <tr>
          <td style={{borderRight:"1px solid black"}}>Item Name: {val2.name}</td>
          <td style={{borderRight:"1px solid black"}}>Item Value: {val2.value}</td>
          </tr>
        </table>
        ))}
        </>
      ))}
    </ul>
  );
}

export default App;

As whole Data is a single object, you need to loop through Object.values(Data). With that and using && operator for checking if a poperty exists or not should do the job.