So I have a filter list and everytime i click on an collapseItem, it adds its value (circled red) into a useState store. it works for the desktop sidebar but NOT for the (circled blue) mobile sidebar because setter function (setDuplicateStore) is not a function (undefined). I have spent about 10 hours trying to debug this.
desktop sidebar:
mobile sidebar:
When I try to add the values in the store (desktop sidebar):
When I try to add the values in the store (mobile sidebar):
CarFilter.jsx:
import { ImFilter } from "react-icons/im";
import Collapse from "../components/Collapse";
import { useState } from "react";
**const CarFilter = ({ zipInput, showZipInput, cars }) => {
const [duplicateStore, setDuplicateStore] = useState({
desktop: [],
mobile: [],
});**
console.log(duplicateStore);
let featuresArr;
const featuresLength = cars.reduce((acc, car) => {
const carLength = Object.keys(car).length;
if (carLength > acc) {
return carLength;
} else return acc;
}, 15);
cars.forEach((car) => {
const features = Object.keys(car);
const carLength = Object.keys(car).length;
if (carLength === featuresLength) featuresArr = features;
});
return (
<div
className={`hidden w-[40%] 2k:w-[15%] max-w-[280px] 2k:max-w-none mr-auto lg:block rounded-2xl bg-white px-6 py-4 transition duration-300 divide-y 2k:divide-y-2 4k:divide-y-4 ml-4 self-start shadow-xl `}
>
<div className="collapse-title flex items-end justify-between pr-0">
<p className="text-black font-bold text-xl shrink-0 2k:text-3xl 4k:text-4xl">
Filter By
</p>
<div>
<ImFilter
className="inline-block h-6 w-6 2k:h-9 2k:w-9 4k:h-12 4k:w-12 -ml-9"
fill="orange"
/>
</div>
</div>
<div className="collapse collapse-plus">
<input type="checkbox" className="peer" />
<div className="collapse-title bg-white text-neutral-focus text-sm font-bold 2k:text-xl 4k:text-3xl">
Distance
</div>
<div className="collapse-content">
<select className="text-slate-500 decorated select bg-white border border-primary focus:border-primary w-full max-w-xs focus:outline-0 focus:ring-0 ring-offset-0 font-semibold [&>*]:font-semibold [&>*]:italic 2k:text-base 4k:text-2xl">
<option disabled selected>
Any Distance
</option>
<option>5 miles</option>
<option>25 miles</option>
<option>50 miles</option>
<option>100 miles</option>
<option>250 miles</option>
<option>500 miles</option>
<option>1000 miles</option>
</select>
<p className="text-xs my-3 text-left mx-auto text-black font-light 2k:text-base 4k:text-2xl">
From{" "}
{zipInput ? (
"Your Location"
) : (
<span
className="text-blue-500 font-normal cursor-pointer 2k:text-base 4k:text-2xl"
onClick={() => showZipInput(true)}
>
10001
</span>
)}
</p>
{zipInput && (
<div className="relative 2k:text-base 4k:text-2xl">
<span className="text-blue-500 absolute top-1 right-4">{`>`}</span>
<input
className="text-slate-500 w-full border border-primary rounded-lg px-3 py-1 outline-0"
placeholder="10001"
/>
</div>
)}
</div>
</div>
{featuresArr?.map((feature) => {
switch (feature) {
case "carImg":
case "_id":
case "carDesc":
case "allData":
case "carPrice":
case "features":
return;
}
const featureValues = cars?.map((car) => car[feature]);
const values = [...new Set(featureValues.flat(Infinity))]
.filter((value) => value !== "")
.sort();
return (
<Collapse
feature={feature}
values={values}
setDuplicateStore={setDuplicateStore}
addRemove={addRemove}
/>
);
})}
</div>
);
};
export default CarFilter;
Collapse.jsx:
import CollapseItem from "./CollapseItem";
const Collapse = ({ feature, values, slideDrawer, openFirst, **setDuplicateStore**, addRemove }) => {
return (
<div
className={`collapse ${
openFirst?.includes(feature) ? "collapse-open" : "collapse-plus"
}`}
>
<input type="checkbox" className="peer" />
<div className="collapse-title bg-white text-neutral-focus peer-checked:bg-white peer-checked:text-neutral-focus text-sm font-bold 2k:text-xl 4k:text-2xl">
{feature === "driveTrain"
? "Drive Train"
: `${feature?.slice(0, 1).toUpperCase()}${feature?.slice(1)}`}
</div>
<div
className={`collapse-content bg-white text-neutral-focus peer-checked:bg-white peer-checked:text-neutral-focus ${
slideDrawer && "flex flex-wrap gap-1.5"
}`}
>
{values?.map((featureValue) => {
return (
<CollapseItem
featureValue={featureValue}
slideDrawer={slideDrawer}
title={feature}
**setDuplicateStore={setDuplicateStore}**
addRemove={addRemove}
/>
);
})}
</div>
</div>
);
};
export default Collapse;
CollapseItem.jsx:
import React, { useState } from "react";
import { filterData } from "./filterData";
const CollapseItem = ({
featureValue,
slideDrawer,
title,
setDuplicateStore,
addRemove,
}) => {
**const [isChecked, setIsChecked] = useState("");
const checkbox = (_) => {
isChecked === "checked" ? setIsChecked("") : setIsChecked("checked");
};
const [selectedFeature, setSelectedFeature] = useState(false);**
const handleClick = (featureValue, title) => {
filterData(featureValue, title);
};
return (
<div className={`${slideDrawer && "w-[48%]"}`}>
{slideDrawer ? (
<div
className={`form-control border border-yellow-500 w-[100%] h-[100%] grow rounded transition-colors active:bg-[#FFCC00] ${
selectedFeature && "bg-[#BD9700]"
}`}
onClick={() => {
setSelectedFeature(!selectedFeature);
handleClick(featureValue, title);
// mobile
//start
**if (!selectedFeature) {
setDuplicateStore((prevDuplicateStore) => ({
...prevDuplicateStore,
mobile: [
...new Set([...prevDuplicateStore["mobile"], featureValue]),
],
}));
} else {
setDuplicateStore((prevDuplicateStore) => {
const index =
prevDuplicateStore["mobile"].indexOf(featureValue);
prevDuplicateStore["mobile"].splice(index, 1);
return prevDuplicateStore;
});
}**
//end
}}
>
<label className="label cursor-pointer ">
<span
className={`label-text italic font-light ${
selectedFeature ? "text-white" : "text-black"
} `}
>
{featureValue}
</span>
</label>
</div>
) : (
<div className="form-control">
<label className="label cursor-pointer">
<span className="text-slate-500 label-text font-semibold italic w-[160px] inline-block 2k:text-base 4k:text-2xl">
{featureValue}
</span>
<input
type="checkbox"
checked={isChecked}
className="checkbox checkbox-primary focus:outline-none focus:ring-0 focus:ring-offset-0 inline-block -mr-2"
onChange={checkbox}
onClick={() => {
handleClick(featureValue, title);
// desktop
// start
**if (isChecked === "") {
setDuplicateStore((prevDuplicateStore) => ({
...prevDuplicateStore,
desktop: [
...new Set([
...prevDuplicateStore["desktop"],
featureValue,
]),
],
}));
} else {
setDuplicateStore((prevDuplicateStore) => {
const index =
prevDuplicateStore["desktop"].indexOf(featureValue);
prevDuplicateStore["desktop"].splice(index, 1);
return prevDuplicateStore;
});
}**
//end
}}
/>
</label>
</div>
)}
</div>
);
};
export default CollapseItem;
