I have a filter section and there are three select 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>