What is right coding about sending request, if I have 3 select and if user can choose one or two or all of them?

Viewed 16

I have a filter section and there are three select here. enter image description here

When the user changes the value of select, I have to get requests. But there are several situations, for example, user can change one of them or two of them. I can only write the API, when all the selects are chosen.

For example, if the user chooses all selects the API must be like this

http://localhost:8000/rows?count=3&amount_gte=1500&amount_lte=5000&status=t%C9%99sdiql%C9%99nib&

or if the user chooses two select the API must be like this

http://localhost:8000/rows?count=3&status=t%C9%99sdiql%C9%99nib

I wanted to write this code with if else into axios path, but if select is not chosen, it is null in Api. I think my writing is not correct, and I don't know how can i write it.

My codes


 const [filter, setFilter] = useState({
    count: null,
    amount: {
      from: null,
      to: null,
    },
    status: "",
  });

  useEffect(() => {
    if (filter.count || filter.amount.from || filter.status) {
      axiosInstance
        .get(
          `/rows?${filter.count && `count=${filter.count}&`}${filter.amount && `amount_gte=${filter.amount.from}&amount_lte=${filter.amount.to}&`}${
            filter.status && `status=${filter.status}`
          }`
        )
        .then((res) => console.log(res.data));
    }
  }, [filter.count, filter.status, filter.amount]);

  const handleFilterCount = (e) => {
    setFilter((prevState) => ({
      ...prevState,
      count: e.target.value,
    }));
  };

  const handleFilterAmount = (e) => {
    setFilter((prevState) => ({
      ...prevState,
      amount: { from: e.target.value, to: e.target.value === 50 ? 1500 : e.target.value === 1500 ? 5000 : 10000 },
    }));
  };

  <Select       defaultValue={"default"}
                onChange={handleFilterCount}
              >
                <MenuItem value={"default"} disabled>
                  Choose
                </MenuItem>
                <MenuItem value={1}>1</MenuItem>
                <MenuItem value={2}>2</MenuItem>
              </Select>

 <Select   onChange={handleFilterAmount}
                defaultValue={"default"}
             
              >
                <MenuItem value={"default"} disabled>
                  Choose
                </MenuItem>
                <MenuItem value={50}>$ 50 - $ 1500</MenuItem>
                <MenuItem value={1500}>$ 1500 - $ 5000</MenuItem>
                <MenuItem value={5000}>$ 5000 - $ 10000</MenuItem>
              </Select>
0 Answers
Related