I have an array in parent component with some values 'name', i want to render the items in the child component based on the matching value from an array with same value 'name'. Like when user clicks on an item from the parent component, it should render the values based on the onClicked value from item in child component array. I hope I am clear.
This is my parent component:
import React, { useState } from "react";
import Icon from "../../../components/ui/Icon";
import Card from "@/components/ui/Card";
import Products from "../../../components/partials/widget/products";
import SelectMonth from "@/components/partials/SelectMonth";
const BillsTopups = () => {
const [selectedItem, setSelectedItem] = useState(null);
const templateData = [
{
title: "Saved Templates",
description: "Payments that you made most frequently",
icon: "material-symbols:add-circle",
name: "template,",
},
{
title: "Mobile Networks",
description: "Payments that you made most frequently and Instantly",
icon: "material-symbols:add-circle",
name: "network,",
},
{
title: "Utilities",
description: "Check your home utility bulls and pay them",
icon: "material-symbols:delete",
name: "utilities,",
},
{
title: "Mobile Networks",
description: "Payments that you made most frequently and Instantly",
icon: "material-symbols:add-circle",
name: "network,",
},
{
title: "Utilities",
description: "Check your home utility bulls and pay them",
icon: "material-symbols:delete",
name: "bills,",
},
];
const handleItemClick = (item) => {
setSelectedItem(item);
};
return (
<div className="grid grid-cols-12 gap-5 mt-5">
<Card
title="Select Services"
className="lg:col-span-6 xl:col-span-6 2xl:col-span-6 col-span-12 space-y-1 h-full w-full"
>
<div className="rounded-lg bg-white">
{templateData.map((item, index) => (
<>
<div
key={index}
className="bg-no-repeat bg-cover bg-center p-4 rounded-[6px] relative cursor-pointer hover:bg-black-200 transform hover:scale-105 "
onClick={() => handleItemClick(item)}
>
<div className="max-w-[180px]">
<h4 className="text-base font-medium text-slate-800 mb-2 ">
{item.title}
</h4>
<p className="text-xs text-slate-800 text-opacity-80">
{item.description}
</p>
</div>
<div className="absolute top-1/2 -translate-y-1/2 ltr:right-6 rtl:left-6 mt-2 h-12 w-12 bg-slate-200 rounded-full text-xs font-medium flex flex-col items-center justify-center">
<span className="text-3xl text-slate-800">
<Icon icon={item.icon} />
</span>
</div>
</div>
<hr className="w-4/5 mx-auto border border-gray-200 dark:border-gray-600 my-0" />
</>
))}
</div>
</Card>
<div className="lg:col-span-6 xl:col-span-6 2xl:col-span-6 col-span-12 space-y-5 h-full w-full rounded-lg">
<Card title="Saved Templates" headerslot={<SelectMonth />}>
<Products selectedItem={selectedItem} />
</Card>
</div>
</div>
);
};
export default BillsTopups;
and below is my child component:
import React from "react";
const Products = ({ selectedItem }) => {
const services = [
{
img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
price: "$150.00",
title: "Car engine oil",
name: "bills",
},
{
img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ovcsxjuvmzshxivkwa6y",
price: "$150.00",
title: "Car engine oil",
name: "network",
},
{
img: "https://cdn-icons-png.flaticon.com/512/3670/3670174.png",
price: "$150.00",
title: "Car engine oil",
name: "template",
},
{
img: "https://w7.pngwing.com/pngs/779/408/png-transparent-airbnb-circle-round-icon-travel-popular-services-brands-vol-icon.png",
price: "$150.00",
title: "Car engine oil",
name: "utilities",
},
{
img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
price: "$150.00",
title: "Car engine oil",
name: "utilities",
},
{
img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
price: "$150.00",
title: "Car engine oil",
name: "bills",
},
{
img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
price: "$150.00",
title: "Car engine oil",
name: "network",
},
];
const filteredItems = services.filter(
(item) => item.name === selectedItem?.name
);
cl
return (
<div className="grid md:grid-cols-3 grid-cols-1 gap-5 ">
{filteredItems.map((item, i) => (
<div
key={i}
className="bg-slate-50 dark:bg-slate-900 p-4 rounded text-center cursor-pointer group"
>
<div className="h-12 w-12 mb-4 mx-auto relative rounded-full">
<img
src={item.img}
alt=""
className="w-full h-full rounded-full group-hover:scale-110 transition-all duration-300 bg-purple-200"
/>
</div>
<span className="text-slate-900 dark:text-slate-300 text-sm mb-2 block font-medium">
{item.title}
</span>
<span className="text-pink-600 dark:text-pink-600 text-sm mb-1 block font-normal bg-pink-200 p-1">
{item.price}
</span>
</div>
))}
</div>
);
};
export default Products;
