I'm trying to add an option to my select element to be able to choose an max option over a certain value. In this case 250. I've tried to do the greater than ">" comparison operator >250 but it doesn't seem to accept that syntax. How would one max it possible to do so?

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [minPrice, setMinPrice] = useState(0);
  const [maxPrice, setMaxPrice] = useState(50);

  const handlePrice = (value) => {
    switch (value) {
      case "1":
        setMinPrice(0);
        setMaxPrice(50);
        break;
      case "2":
        setMinPrice(50);
        setMaxPrice(100);
        break;
      case "3":
        setMinPrice(100);
        setMaxPrice(250);
        break;
      case "4":
        setMinPrice(250);
        setMaxPrice(>250); //doesn't work
        break;
      default:
        setMinPrice(0);
        setMaxPrice(50);
        break;
    }
  };

  return (
    <div className="App">
      <select
        className="custom-select"
        id="priceGroup"
        onChange={(event) => handlePrice(event.target.value)}
      >
        <option value="1">Under $50</option>
        <option value="2">$50 to $100</option>
        <option value="3">$100 to $250</option>
        <option value="4">Over $250</option>
      </select>

      <div>Your min price is {minPrice}</div>
      <div>Your max price is {maxPrice}</div>
    </div>
  );
}

CodePudding user response：

What I can understand from the question is that you want to display ">250" when user selects option 4. If so, setMaxPrice(>250) will not work because >250 it doesn't come under any datatype. You could pass it down as a string like setMaxPrice(">250") and that should work.