How to display data from a nested JSON response into table in ReactJS

Question

React newbie here; I have a table which displays the simple JSON response I get from my backend. But, I am not able to display some nested properties I have for each item.

---

What I Tried

I am not sure if I need to use .map function or run a loop, or use any accessor. I have a table filled with a JSON response, but it needs to have another row with the correct nested data being displayed for each row. The data is being sent just fine. I think I am not able to parse it.

---

My Code

const dispatchPlanColumns = [
  {
    dataField: "id",
    text: "ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Truck",
    sort: true,
    isDummyField: true,
    formatter: (cell, row) => (
      <span>
        {row.truck_type} {row.truck_name}
      </span>
    )
  },
  {
    dataField: "total_trucks",
    text: "NO. of trucks",
    sort: true
  },
  {
    dataField: "weight",
    text: "Weight",
    sort: true
  },
  {
    dataField: "percent_filled",
    text: "Volume utilisation",
    sort: true
  },
  {
    dataField: "origin",
    text: "Route",
    isDummyField: true,
    formatter: (cell, row) => (
      <span>
        {row.origin} -> {row.destination}
      </span>
    )
  },
  {
    dataField: "distance",
    text: "Route Distance",
    sort: true
  },
  {
    dataField: "route_tat",
    text: "Date",
    sort: true
  },
  {
    dataField: "time",
    text: "Dispatch Time",
    sort: true
  },
  {
    dataField: "Action",
    text: "Action",
    sort: true,
    formatter: (row, cell) => <Button color="primary">Raise RFQ</Button>
  }
];

const dispatchListColumns = [
  {
    dataField: "id",
    text: "SKU ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Name",
    sort: true
  },
  {
    dataField: "quantity",
    text: "Quantity",
    sort: true
  },
  {
    dataField: "weight",
    text: "Weight",
    sort: true
  }
];

const LoadingPlan = ({ row }) => {
  const [plan, setPlan] = useState([]);

  useEffect(() => {
    const getNetwork = async () => {
      const data = await getDispatchHistory();
      const plan = await getDispatchHistory();
      setPlan(data);
      setPlan(plan);
    };

    getNetwork();
  }, [setPlan]);

  return (
    <div
      className={"animated slideInDown lightSpeedIn"}
      style={{ marginBottom: 60, marginTop: 20 }}
    >
      <Row>
        <Col lg={7}>
          <DataTable columns={dispatchListColumns} data={plan} />
        </Col>
        <Col lg={4}>
          <DispatchMapWrapper />
        </Col>
      </Row>
    </div>
  );
};

const expandRow = row => <LoadingPlan row={row} />;

export default props => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const getNetwork = async () => {
      const data = await getDispatchHistory();
      setData(data);
    };

    getNetwork();
  }, [setData]);

  return (
    <Row>
      <Col lg={12}>
        <Card>
          <CardHeader>
            <b>Dispatch Plan</b>
          </CardHeader>

          <CardBody>
            <DataTable
              columns={dispatchPlanColumns}
              data={data}
              expandRow={{ renderer: expandRow }}
            />
          </CardBody>
        </Card>
      </Col>
    </Row>
  );
};

This is the data

let data = [
  {
    id: 11,
    truck_name: "20 ft sxl 7 Ton",
    truck_type: "Container",
    items: [
      {
        id: "10",
        name: "Coupling",
        pid: 6,
        quantity: 2,
        length: 5.0,
        width: 4.0,
        height: 3.0,
        volume: 60.0,
        weight: 650.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-09-20T12:00:00",
        destination: "Gaya",
        time: "2019-08-01T17:09:06.106859",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      }
    ],
    comments: "Autogenerated",
    origin: "Delhi",
    destination: "Gaya",
    total_trucks: 1,
    material_type: "Non-Fragile",
    scheduled_date: "2019-09-20T12:00:00",
    offered_price: 0,
    weight: 6500,
    status: "Hold",
    created_on: "2019-08-13T10:06:40.761801",
    route_distance: 1088.821,
    route_tat: "19 Hours 27 Minutes",
    etd: "2019-08-15T14:39:32.261802",
    eta: "2019-09-20T12:00:00",
    route_link:
      "https://www.google.com/maps/embed/v1/directions?&key=AIzaSyBa6popp4h4-uNP98vV_-qhI9-GdHg1uQ8&origin=Delhi&destination=Gaya&mode=driving&language=en",
    percent_filled: "92.85714285714286",
    owner: 1
  },
  {
    id: 12,
    truck_name: "20 ft sxl 6 Ton",
    truck_type: "Container",
    items: [
      {
        id: "7",
        name: "Cover Shaft",
        pid: 3,
        quantity: 2,
        length: 3.0,
        width: 3.0,
        height: 4.0,
        volume: 36.0,
        weight: 500.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-08-10T12:00:00",
        destination: "Kalyan-Dombivli",
        time: "2019-08-01T17:09:05.898876",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      },
      {
        id: "7",
        name: "Cover Shaft",
        pid: 3,
        quantity: 2,
        length: 3.0,
        width: 3.0,
        height: 4.0,
        volume: 36.0,
        weight: 500.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-08-10T12:00:00",
        destination: "Kalyan-Dombivli",
        time: "2019-08-01T17:09:05.898876",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      }
    ]
  }
];

These are some routes info, and the nested item's info within each route. I am not able to display the item's info.

Answer 1

Following your code, I have found this issue:

      const data = await getDispatchHistory();
      const plan = await getDispatchHistory();
      setPlan(data);
      setPlan(plan);

Are you fetching and setting the state twice? Could this be the problem?