how can you show a "no result found" after filtering?
const searchItems = (searchValue) => {
setSearchInput(searchValue)
if (searchInput !== '') {
const filteredData = APIData.filter((post) => {
return Object.values(post).join('').toLowerCase().includes(searchInput.toLowerCase())
})
setFilteredResults(filteredData)
}
else{
setFilteredResults(APIData)
}
}
I returned the filtered data but I didn't know how to return a "no result found" if the user types wrong data!
This is the text Input
<OutlinedInput
className="SearchInput"
placeholder='Search...'
onChange={(e) => searchItems(e.target.value)}
endAdornment={
<InputAdornment>
<SearchIcon />
</InputAdornment>
}
/>
I'm using
{searchInput.length > 0 ? () : ()}
You should check your filteredData after you recive the data.
if (searchInput !== '') {
const filteredData = APIData.filter((post) => {
return Object.values(post).join('').toLowerCase().includes(searchInput.toLowerCase())
})
if(filteredData){
setFilteredResults(filteredData);
}else{
console.log("no result found");
}
}
else{
setFilteredResults(APIData)
}
Or check if your response contains some type you are looking for like
if (!isNumber(filteredData.id) && filteredData.id === 0) {
console.log("no result found");
}
You can find some examples over here https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter