I have SortableContext for dopping my sweaters. But when I remove every sweater from one of them, it
dissapears and I cant put anything else in it. Im using dnd kit and react. Has this happened to anyone else?
Below are my component that I want to drag between sortablecontext and a component where I want to drop it that contain sortablecontext.
function Sweater({ sweater, folded, forFoundation, noStyle }) {
const { id, sweaterImg, foldedSweater } = sweater;
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id, data: { type: "sweater", forFoundation, sweater } });
const style = {
transition,
transform: CSS.Transform.toString(transform),
};
if (isDragging) return null;
return (
<div ref={setNodeRef} {...attributes} {...listeners} style={style}>
<img
style={{ left: `${(id - 1) * 120}px` }}
className={folded ? "foldedsweater__img" : "sweater__img"}
src={folded ? foldedSweater : sweaterImg}
alt="sweater"
></img>
</div>
);
}
function SingleFoundation({ foundationSweaters, forFoundation, name }) {
const [showPopup, setShowPopup] = useState(false);
const foundationSweatersIds = useMemo(
() => foundationSweaters.map((col) => col.id),
[foundationSweaters]
);
return (
<>
<InformationPopup
showPopup={showPopup}
close={() => setShowPopup(false)}
name={name}
/>
<div className="foundation__wrapper">
<div className="information__wrapper">
<a onClick={() => setShowPopup(true)}>
<img
className="information__img"
src="srcassetsinfoIcon.png"
alt="informations"
/>{" "}
</a>
<a href="https://lampas92.hu/" target="_blank">
{" "}
<img
className="link__img"
src="srcassetslinkIcon.png"
alt="informations"
/>{" "}
</a>
</div>
<p className="sweaterscount__text">{foundationSweaters.length}</p>
<h2 className="foundationname__text">{name} </h2>
<SortableContext
items={foundationSweatersIds}
strategy={verticalListSortingStrategy}
>
<div className="soratable__wrapper">
<div className="shelf__sortable">
{foundationSweaters.length == 0 ? (
<p>Nesto</p>
) : (
foundationSweaters.map((sweater) => (
<Sweater
key={sweater.id}
sweater={sweater}
forFoundation={forFoundation}
folded={true}
/>
))
)}
</div>
<img src="src/assets/shelf.png" className="shelf" alt="shelf" />
</div>
</SortableContext>
</div>
</>
);
}
I tried giving fixed height to element inside the context but same thing happens
Dominik Budinčevič is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.