Loops inside react components leading to rendering of sub components

Question

I have a data as below

myArr = [
  {
    "Sl.No": "n1",
    company: "ABC",
    Name: "Sam",
    Designation: "Architect",
    Salary: "100",
  },
  {
    "Sl.No": "n2",
    company: "ABC",
    Name: "Bill",
    Designation: "Engineer",
    Salary: "200",
  },
  {
    "Sl.No": "n3",
    company: "ABC",
    Name: "Jill",
    Designation: "HR",
    Salary: "300",
  },
  {
    "Sl.No": "n4",
    company: "XYZ",
    Name: "Bill",
    Designation: "Engineer",
    Salary: "250",
  },
  {
    "Sl.No": "n5",
    company: "XYZ",
    Name: "Tom",
    Designation: "Mechanic",
    Salary: "150",
  },
  {
    "Sl.No": "n6",
    company: "LMN",
    Name: "Tom",
    Designation: "Mechanic",
    Salary: "150",
  },
];

I want to create a react app which shows the data as below. Nothing but listing the employees & their designations under the name of the company.

The boxes on the right are number of doses of vaccine taken (data comes from somewhere else)

I have the components set-up like so

Inside App.js I have left out importing the components, css & all that for simplcity

export const App = () => {
return (
    <div className=app}>
      <CompanyInfo />
    </div>
  );
}

Inside CompanyInfo.js

export const CompanyInfo= () => {

let companies= [...new Set(myArr.map((item) => item.company))];

  const renderingComponents = (company: string, index: number) => {
    return (
      <Fragment key={index}>
        <p className="company-name">{company}</p>
        <div className="category-employees">
          <CompanyEmployee toggled={toggled} />
        </div>
        ;
      </Fragment>
    );
  };

return (
    <div className=company-info}>
       {companies.map((item, index) => renderingComponents(item, index))}
    </div>
  );
}

So far, so good, I can render the titles of all the companies & I have hardcoded the CompanyEmployee to see if it populates within every company & it does. However, I want CompanyEmployee to be dynamic & I am not able to figure our how to pass the company related info to the components (that data will have info of all the company employees) and then map the CompanyEmployee component on that data.

Inside CompanyEmployee.js

Please note that this is like a wrapper for 2 components

export const CompanyEmployee= () => {
return (
    <div className=ce}>
      <EmployeePrimaryDetails />
      <EmployeeVacDetails />
    </div>
  );
}

Inside EmployeePrimaryDetails.js

export const EmployeePrimaryDetails= (props) => {
return (
    <div className=epd>
      <span className="name">{props.Name}</span>
      <span className="designation">{props.Designation}</span>
    </div>
  );
}

Can anyone guide me on how I render EmployeePrimaryDetails.js for each employee of the company? I tried to do a for of , forEach , map in the renderingComponents function of CompanyInfo itself but when I try that I get the Typescript error "Expression Expected" (I am using typescript with React in my project).

Any help is appreciated.

Answer 1

Inside renderingComponents function you can say:

const filteredList = myArr.filter(employee => employee.company === company);
filteredList.map(employee => (<CompanyEmployee employee={employee} toggled={toggled} />));

Resulting in this:

const renderingComponents = (company: string, index: number) => {
const filteredList = myArr.filter(employee => employee.company === company);
    return (
      <Fragment key={index}>
        <p className="company-name">{company}</p>
        <div className="category-employees">
          {filteredList.map(employee => (<CompanyEmployee employee={employee} toggled={toggled} />))}
        </div>
        ;
      </Fragment>
    );
  };

So in CompanyEmployee component you can destructure the data you need.