This might be a simple duplicate question but I couldn't find any solution that resolve my case below. Please help me out! :)
I'm looking for a string method to check if the value matches a specific string and return that result.
create-react-app and I have a <select> dropdown for users to filter dishes with a specific price rangeI'm currently using the .includes method and not getting the result I want because it includes all the results that contain a character from the string. (If users choose "$", it will also return the results including "$$" and "$$$")
-> I only want them to return the results with exactly the value of strings above.
So what to use instead of .includes ?
// Initial states:
const [foodList, setFoodList] = useState([])
const [foodName, setFoodName] = useState('')
const [isVegetarian, setIsVegetarian] = useState('')
const [priceRange, setPriceRange] = useState('$')
const [textSearch, setTextSearch] = useState('')
const [priceDropdown, setPriceDropdown] = useState('')
const [vegDropdown, setVegDropdown] = useState('')
// Search.js:
const newSearch = props.foodList.filter((value) => {
return (
value.foodName.toLowerCase().includes(textSearch.toLowerCase()) &&
// What to use instead of .includes here?
value.priceRange.toLowerCase().includes(priceDropdown.toLocaleLowerCase())
&& value.isVegetarian.includes(vegDropdown.toLowerCase())
)
}
)
It looks like a standard === is going to be sufficient for your needs, since you're not checking if a value includes the filter selection, but that it is exactly the selection. (I suspect you'll want the same on the isVegetarian option, too.
const newSearch = props.foodList.filter((value) => {
return (
value.foodName.toLowerCase().includes(textSearch.toLowerCase()) &&
value.priceRange.toLowerCase() === priceDropdown.toLocaleLowerCase() &&
value.isVegetarian === vegDropdown.toLowerCase()
)
});
Also, as the comments mentioned, try to keep your example as minimal as possible to reproduce the issue - it's always a balance between context and simplicity. In this case, though, showing a small data structure of foodList and the newSearch method (with a little explanation) would probably be sufficient.