Kevin Powell - Community•2y ago

React <MDBRange/> filter: trying to get it to display range of cars

GitHub: https://github.com/nnall/Inventory.git This is my Filter component: https://github.com/nnall/Inventory/blob/main/src/filter.js The filter in question is the <MDBRange/>

<div className="filter-type">
  <h4>Down Payment</h4>
  <MDBRange
    min={min}
    max={max}
    defaultValue={max}
    id="customRange"
    label="Down Payment"
    onChange={(e) => {
      const limit = Number(e.target.value);
      handleChange("requireddown", limit);
      
    }}
  />
</div>

<div className="filter-type">
  <h4>Down Payment</h4>
  <MDBRange
    min={min}
    max={max}
    defaultValue={max}
    id="customRange"
    label="Down Payment"
    onChange={(e) => {
      const limit = Number(e.target.value);
      handleChange("requireddown", limit);
      
    }}
  />
</div>

The number value for my MDBRange here is getting sent to handleChange(), which is where I think the logic breaks down somehow, or at least the way it's been implemented is too clunky to have a smooth interaction. The handle change function receiving the current MDBRange value, "value".. I want to use this value as a way to output an array of all cars whose .requireddown property is equal to or less than the current MDBRange value.

if (field === "requireddown") {
      //   console.log(`${value} is the current value`);

      const updatedDownPayments = selectedDownPayments.includes(value)
        ? selectedDownPayments.filter(
            (requireddown) => Number(requireddown) <= value
          )
        : [...selectedDownPayments, value];
      setSelectedDownPayments(updatedDownPayments);
    }

if (field === "requireddown") {
      //   console.log(`${value} is the current value`);

      const updatedDownPayments = selectedDownPayments.includes(value)
        ? selectedDownPayments.filter(
            (requireddown) => Number(requireddown) <= value
          )
        : [...selectedDownPayments, value];
      setSelectedDownPayments(updatedDownPayments);
    }

I've set the default value, so the value the MDBRange starts out with on page load, to be the maximum value, 10000. The cars are not initially being added according to anything the "requiredown" handleChange function is dictating, but once a change in that MDB element is detected, then the results are modified and re-displayed to match. So, starting at the maximum end of the <MDBRange>, I should be seeing all cars, since I'm saying "show me all cars whose requiredown is no larger than 10,000" which is all. Then sliding left, cars should start disappearing, but they don't until I reach the min first and come back up.

GitHub

GitHub - nnall/Inventory

Contribute to nnall/Inventory development by creating an account on GitHub.

GitHub

Inventory/src/filter.js at main · nnall/Inventory

Contribute to nnall/Inventory development by creating an account on GitHub.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

React <MDBRange/> filter: trying to get it to display range of cars