import React from 'react' import {Accordion} from "react-bootstrap"; import {Crate} from "./Crate"; import {useShopStore} from "./shop_store"; import {useRenderCount} from "@uidotdev/usehooks"; export function CrateList() { const renderCount = useRenderCount(); const crates = useShopStore((state) => state.crates, (a, b) => a.length === b.length); const active_crate = useShopStore((state) => state.active_crate); const onAddCrate = useShopStore((state) => state.newCrate); const setActiveCrate = useShopStore((state) => state.setActiveCrate); console.log("CrateList renders: ", renderCount) return ( { // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded if (e !== null) setActiveCrate(e); else setActiveCrate("") }}> {crates.map((crate, index) => Crate #{`${index}`} )} Add new crate ) }