On my site, I’d like to implement a filter that allows users to filter an event based on their range. For example: there are many videos in the database (short videos or short films or feature films). I would like that the user in the field could type, for example, in the “from” field – the number 60, and in the “to” field – the number 120, and he was given films lasting from 60 to 120 minutes.
I already have certain developments. I implemented the input field using TextField. I also made restrictions on the number of characters entered (the number entered cannot be more than seven characters).
But I have a problem that by default in these fields is zero (and also zero appears after the user deletes the previously entered value). Please tell me how can I make the field empty by default.
const MAX_DURATION = 9999999
export default function Duration() {
const { filters, setFilters } = useContext(PageContext);
const [minDuration, setMinDuration] = useState(filters.durationRange.start);
const [maxDuration, setMaxDuration] = useState(filters.durationRange.end);
useEffect(() => {
setMinDuration(filters.durationRange.start);
setMaxDuration(filters.durationRange.end);
},
[filters.durationRange.start, filters.durationRange.end]);
useEffect(() => {
var updatedFilters = { ...filters }
updatedFilters.durationRange = { start: minDuration, end: maxDuration }
setFilters(updatedFilters)
}, [minDuration, maxDuration]);
return (
<div>
<div>
<TextField
label="From"
value={minDuration}
onInput={(e) => {
e.target.value = Math.max(e.target.value).toString().slice(0, 7)
const newValue = Number(e.target.value)
if (newValue) {
setMinDuration(newValue)
} else if (newValue == 0) {
setMinDuration(0)
}
}}
/>
</div>
<div>
<TextField
label="To"
value={maxDuration}
onInput={(e) => {
e.target.value = Math.max(e.target.value).toString().slice(0, 7)
const newValue = Number(e.target.value)
if (newValue) {
setMaxDuration(newValue)
} else if (newValue === 0) {
setMaxDuration(0)
}
else setMaxDuration(MAX_DURATION)
}}
/>
</div>
</div>
);
}
