#Multi Select (dependant on each other)

6 messages · Page 1 of 1 (latest)

timber cargo
#

Hello

I have 3 Select (Brand, Range and SubRange) components. My first one has initial data. The second one data is unset by default and should dynamically fill according to the 1st selected value. And so on for the 3rd.
@dawn shale recommanded me to use https://mantine.dev/core/select/#controlled but I don't understand how it works.

On the OnChange event I should call my handler function to call my API to get the corresponding data from that selected value.

Here's the base code :

const Filter = () => {
  const brands = useBrands();
  const ranges = [];
  const subRanges = [];
  const [brand, setBrand] = useState("");
  const [range, setRange] = useState("");
  const [subRange, setSubRange] = useState("");

  const handleBrandSelected = () => {
    // here I should get the brand with setBrand
    const ranges = useRanges(brand);
  }

  return (
    <>
      <Select data={brands} placeholder="brands" onChange={() => {
          // here I need to set the brand and call my handler once it's done, how ?
         setBrand 
         handleBrandSelected} />
      <Select data={ranges} placeholder="ranges" />
      <Select data={subRanges} placeholder="subRanges" />
    </>
}

Here's my raw data getters

export function useBrands() {
  // axios.get("/brands") ...
  const brands = ["brand1", "brand2", "brand3"];
  return brands;
}

export function useRanges(brand: string) {
  // axios.get("/brands/{brand}") ...
  const ranges = [
    {
      brand: "brand1",
      ranges: ["B1-R1", "B1-R2", "B1-R3"],
    },
    {
      brand: "brand2",
      ranges: ["B2-R1", "B2-R2", "B2-R3"],
    },
    {
      brand: "brand3",
      ranges: ["B3-R1", "B3-R2", "B3-R3"],
    },
  ];

  return ranges.find((range) => range.brand === brand);
}```
unknown.png
fringe nymph
#

My approach would be something like this idk if it works didnt try to run it just directly edited your here on discord. lol

const Filter = () => {
 const brands = useBrands();
 //const ranges = [];
 //const subRanges = [];
  const [selectedBrand, setSelectedBrannd] = useState("")
  const [ranges, setRanges] = useState(useRanges(selectedBrand));
  const [selectedRange, setSelectedRange] = useState();
  const [subRanges, setSubRanges] = useState(useSubRanges(selectedRange));

  const handleBrandSelected = () => {

     const ranges = useBrands(brand);
  }

  return (
    <>
      <Select data={brands} placeholder="brands" onChange={(value) => setSelectedBrand(value) />
      <Select data={ranges} placeholder="ranges" onChange={(value) => setSelectedRange(value)/>
      <Select data={subRanges} placeholder="subRanges" />
    </>
#

This will change the data on the fly when you change somethin on brands

timber cargo
timber cargo
#

Fixed it today, thanks 🙂

fringe nymph
#

Was the solution good? NP!