What string method for matching specific strings in Javascript

Question

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.

I'm using create-react-app and I have a <select> dropdown for users to filter dishes with a specific price range
This dropdown has 3 values which are strings: "$", "$$" and "$$$"

I'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())
            )
          }
      )

What does React have to do with this? Give a minimal reproducible example, see minimal reproducible example. But fundamentally "$$$" does include "$". — jonrsharpe
– jonrsharpe, Commented Jan 7, 2022 at 15:59
why is it not just an exact match? what is the value in priceRange? — epascarello
– epascarello, Commented Jan 7, 2022 at 15:59
@jonrsharpe Thanks for the reminder, I have fixed the question! — KYin
– KYin, Commented Jan 8, 2022 at 7:04
@epascarello I tried === on just the priceRange and it didn't work. But the solution below has me trying on isVegetarian also and it works now :) — KYin
– KYin, Commented Jan 8, 2022 at 7:05

Sam Thornton · Accepted Answer · 2022-01-07 17:45:21Z

2

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.

edited Jan 7, 2022 at 17:45

answered Jan 7, 2022 at 17:38

Sam Thornton

9837 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KYin Over a year ago

Thank you for your kind comment and simple solution! I tried === on priceRange alone and wonder why it didn't work. But this works!

Collectives™ on Stack Overflow

What string method for matching specific strings in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related