When I click on the employee item it should show others working under him, and so on-CodePudding

I cant figure my way out of this, pls help me I got the data from this api

This code can only fetch data, listing them is where im stuck at, each employee has a manager id to them, and 1st employee doesnot have a manager id to him,so he should be displayed when the page is loaded, and i have added expand button in it, so when i click on expand it should display all employees under him only and not others, and if i click the ones listed it should then list other employees under them and so on.

Code

import React, { useEffect, useState } from "react";
import {
  Collapse,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
} from "@mui/material";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";

export default function NewEmp() {
  const [empList, setEmpList] = useState([]);
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(!open);
  };
  useEffect(() => {
    fetch(
      "https://opensheet.elk.sh/1gH5Kle-styszcHF2G0H8l1w1nDt1RhO9NHNCpHhKK0M/employees"
    )
      .then((res) => res.json())
      .then((data) => {
     
        setEmpList(data);
      });
  }, []);

    const [manager,setManager] = useState([]) // This i tried to do something here it
    const out = empList.map((x) =>{           // worked but I think it is useless
      if(!x.manager_id){
        setManager(x.id)
      }
    })

  console.log(manager)

  return (
    <>
      <List sx={{ width: "40%" }}>
        <ListItem>
          <ListItemButton onClick={handleClick}>
            <ListItemText primary={} />
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>
        </ListItem>
<Collapse in={open} timeout='auto' unmountOnExit>
    <List>

    </List>
    </Collapse>
      </List>
    </>
  );
}

CodePudding user response：

Here you go Codesandbox Demo. This should get you on the way.

I did not make an expand button or something. On the left it lists all the employees / managers. On the right of that, it lists the employees associated with the manager.

I loop over the data from the api and make a new array of objects that includes the employees associated with the current manager

const managersAndEmployees = res.data.map(
          ({ id, first_name, last_name, manager_id }) => ({
            id,
            first_name,
            last_name,
            manager_id,
            employees: res.data.filter((emp) => emp.manager_id === id)
          })
        );

That returns an array for that looks like this:

id: "EMP001"
first_name: "Alex"
last_name: "Whatman"
manager_id: ""
employees: Array(2)

Then just list them:

{empList.map((entry, idx) => (
        <Fragment key={idx}>
          <div style={{ display: "flex", columnGap: "50px" }}>
            <div style={{ width: "125px" }}>
              {entry.first_name} {entry.last_name}
            </div>
            <div>
              {entry.employees.map((employee, idx) => (
                <div key={idx}>
                  {employee.first_name} {employee.last_name}
                </div>
              ))}
            </div>
          </div>
          <hr />
        </Fragment>
      ))}

CodePudding user response：

If i understand correctly, you want to list all employees that are manager (manager_id = ''), and then when click in one of them present all employees that are associated to him (manager_id = id).

If it is this, that you pretend, the first list you have to filter all employees that don't have a manager_id.

empList.filter(({manager_id}) => !manager_id)

And then, when you click on employee, you filter the list comparing the manager_id with the id.

empList.filter(({manager_id}) => manager_id === id)

Depending on what you want, it may be better to manipulate the object you receive from the request, in order to have the (ready-made) data you need to render (Example: only display expand if you have subordinates).