How do I map through an array of nested objects?

Question

I have an array called company that holds multiple objects called details in mongo DB that I need to get the data from, specifically, I want to grab the company name and the employee's names from the company array and display them in a list. My question is how do I drill in the array and render the company and employee names.

Currently in my nested map in the List component when I do details.employee, I am only able to get the result of person1 from company ABC and I need all results person 1, 2, and 3 showing from both company ABC and company EFG"

Here is the code from sandbox (note just look at List.js)

import axios from "axios";
import { useEffect, useState } from "react";

const List = () => {
  const [company, setCompany] = useState([
    {
      details: [
        {
          employee: "person2",
          date: "test date",
          tax: "test tax",
          balance: "22"
        },
        {
          employee: "person3",
          date: "test date",
          tax: "test tax",
          balance: "22"
        }
      ],

      company: "TEST-ABC",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    },
    {
      details: {
        employee: "person1",
        date: "test date",
        tax: "test tax",
        balance: "22"
      },
      company: "TEST-EFG",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    }
  ]);

  return (
    <>
      <h2>Customer List</h2>
      {company.map((c, i) => (
        <ul key={i}>
          {c.company}
          {company.map((d, i) => (
            <li key={i}>{d.details.employee}</li>
          ))}
        </ul>
      ))}
    </>
  );
};
export default List;


  return (
    <>
      <h2>Customer List</h2>
      {company.map((c, i) => (
        <li key={i}>
          {c.company}
          {company.map((d, i) => (
            <li key={i}>{d.details.employee}</li>
          ))}
        </li>
      ))}
    </>
  );
};
export default List;

Answer 1

The inner loop needs to be over the employees, not over the company again.

Consider making the stateful variable plural to make it easier to understand too. (since you need to refer to a singular company while mapping, don't want the whole array of companies to be named company as well)

The input structure is quite odd, detail looks to either be an array or an object. (If at all possible, change the structure to be consistent so that it's always an array. Otherwise, you'll have to check whether it's an array or an object every time when rendering.)

Live demo:

const App = () => {
  const [companies, setCompanies] = React.useState([
    {
      details: [
        {
          employee: "person2",
          date: "test date",
          tax: "test tax",
          balance: "22"
        },
        {
          employee: "person3",
          date: "test date",
          tax: "test tax",
          balance: "22"
        }
      ],

      company: "TEST-ABC",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    },
    {
      details: {
        employee: "person1",
        date: "test date",
        tax: "test tax",
        balance: "22"
      },
      company: "TEST-EFG",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    }
  ]);
  
  
  return (
    <React.Fragment>
      <h2>Customer List</h2>
      {companies.map((company, i) => (
        <ul key={i}>
          {company.company}
          {
          Array.isArray(company.details)
            ? company.details.map((detail, j) => <li key={j}>{detail.employee}</li>)
            : company.details.employee
          }
        </ul>
      ))}
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>