I have an API which gives me an array of objects, this is the response from the API
{
data: [
{ order_status: "delivered", order_count: 2, order_amount: 1194 },
{ order_status: "processing", order_count: 1, order_amount: 597 },
]
}
Now I have to parse these data according to the order_status value of each object, means I will check for order_status value and put the corresponding data from that particular object in one column and so on. The expected view is this
my implementation code is
import Loader from "@components/common/Loader";
import { getBillInfo } from "@request/billing";
import { IBillInfo } from "models/billing";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { IoIosArrowDown } from "react-icons/io";
import { useQuery } from "react-query";
import { CSSTransition } from "react-transition-group";
export default function BillingInfo() {
const router = useRouter();
const shopSlug = router.query.slug as string;
const { data, isSuccess, isLoading } = useQuery(
[`bill-info`, shopSlug],
() => getBillInfo(shopSlug),
{
enabled: Boolean(shopSlug),
staleTime: Infinity,
}
);
const billInfo: IBillInfo[] = isSuccess && data?.data.data;
const [toggle, setToggle] = useState(false);
return (
<div className="mt-6">
<div className="bg-white rounded shadow overflow-hidden">
<div
className="flex justify-between py-1 px-4 items-center cursor-pointer hover:bg-gray-50"
onClick={() => setToggle(!toggle)}
>
<h4 className="text-gray-600 mb-1 ml-1 mt-1 font-medium">
Billing Information
</h4>
<div>
<IoIosArrowDown size={20} />
</div>
</div>
<CSSTransition
in={toggle}
timeout={100}
classNames="slide-down"
unmountOnExit
>
<div className="slide-down">
{isLoading ? (
<div className="flex justify-center items-center h-full">
<Loader />
</div>
) : (
<div className="grid grid-cols-5 gap-4 p-6">
<div>
<h5 className="text-gray-500 capitalize">Total Orders</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "total")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">Paid Orders</h5>
{billInfo && billInfo.some((el) => el.order_status === "paid")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">
Processing Orders
</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "processing")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">Picked Orders</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "picked")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">Refunded Orders</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "refunded")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">Shipped Orders</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "shipped")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
<div>
<h5 className="text-gray-500 capitalize">Delivered Orders</h5>
{billInfo &&
billInfo.some((el) => el.order_status === "delivered")
? billInfo.map((order: IBillInfo, index) => (
<div key={index}>
<h3 className="font-medium text-xl">
৳ {order.order_amount || "N/A"}
</h3>
<p className="text-gray-500">
Quantity:{" "}
<strong className="font-semibold text-black">
{order.order_count || "N/A"}
</strong>
</p>
</div>
))
: "N/A"}
</div>
</div>
)}
</div>
</CSSTransition>
</div>
</div>
);
}
But this implementation gives me this view
that means all the values from all the objects are shown in all of the columns but I want only the value corresponding the order_status in each of the respective columns. What am I doing wrong and what should I change in the code?
some()call simply checks if any record contains the relevant prop and then youmap()the entire array. You should insteadfilter()the array for each type and then map those arrays per section. Also don't useindexas key, it will only lead to headaches when the array order changes.