What string method for matching specific strings in Javascript

This might be a simple duplicate question but I couldn’t find any solution that resolve my case below. Please help me out! 🙂

TL;DR:

I’m looking for a string method to check if the value matches a specific string and return that result.

I have 3 values which are strings: "$", "$$" and "$$$"

Currently using the .includes method and not getting the result I want. It includes all the results that contain a character from the string -> I only want them to return the results with exactly the value of strings above.

Please check SearchFilter.js component code below.

Ex: If a user chooses “$” from the priceDropdown, it will only return
the dishes with priceRange = “$”.

—

Explain:

• Inside this Dinner.js, I have a foodList state which is an array that contains all of the data of food from a MongoDB collection (foodName, isVegetarian, priceRange).

• And a Search.js component which has: a search input for foodName, a dropdown for priceRange, a dropdown for isVegetarian option.

If a user searches for the text: “pasta”, price range option: “$$”,
vegetarian option: “yes”.

• It will filter from the foodList array and only return the dishes with those choices included.

-> The problem is in how I’m currently returning the value from the data’s priceRange that includes the value from the priceDropdown that the user chose.

• If they choose “$” from the priceDropdown, it will return all the results with “$” included (including “$$” and “$$$” options).

• If they choose “$$” value from the dropdown, it will return the results of “$$” and “$$$“

—
**Question:**

What string method to use to make it only return the results with the right specific string?

Ex: If a user chooses “$” from the priceDropdown, it will only return
the dishes with priceRange = “$“.

—
**Here are my code:**

**Dinner.js component**:

    import SearchFilter from "SearchFilter.js"
    export default function Dinner() {
    
      const [foodName, setFoodName] = useState('')
      const [isVegetarian, setIsVegetarian] = useState('')
      const [priceRange, setPriceRange] = useState('$')
      const [foodList, setFoodList] = useState([])
    
      // Get data from the DB and display it:
      useEffect(() => {
        let unmounted = false
        Axios.get("https://my-app.com/read")
          .then((response) => {
            if (!unmounted) {
              setFoodList(response.data)
            }
          })
          .catch(error => {
            console.log(error)
            return
          })
        return () => {
          unmounted = true
        }
      }, [foodList])
    
      return ( 
        <div > {
          foodList.length > 0 && foodList.map((val, key) => {
              return (
                // Display a table of data here
                ...
              )
            }
          } 
        </div>
       )
    }

SearchFilter.js component:

export default function SearchFilter(props) {
  const [searchedFood, setSearchedFood] = useState([])
  const [textSearch, setTextSearch] = useState('')
  const [priceDropdown, setPriceDropdown] = useState('')
  const [vegDropdown, setVegDropdown] = useState('')

 // The problem is in here:
  const newSearch = props.foodList.filter((value) => {
        return (
          value.foodName.toLowerCase().includes(textSearch.toLowerCase()) &&
          value.priceRange.toLowerCase().includes(priceDropdown.toLocaleLowerCase()) 
          && value.isVegetarian.includes(vegDropdown.toLowerCase())
        )
      }
  )

  const handleSearch = (event) => {
    event.preventDefault()
    if (textSearch !== '') {
      setSearchedFood(newSearch)
    }
  }

  const clearSearch = (event) => {
    event.preventDefault()
    setSearchedFood([])
    setTextSearch('')
    setPriceDropdown('')
    setVegDropdown('')
  }


  return (
    <section className="search">
      <form className="search__form">
        <div className="search__controls">
          <label htmlFor="text-search">Search a dish: </label>
          <input type="text" placeholder="Search food name" name="text-search" autoComplete="off" value={textSearch} onChange={(event) => {setTextSearch(event.target.value)
            console.log(event.target.value)
          }} />
        </div>
        <div className="search__controls">
          <label>Filter by price range: </label>
          <select value={priceDropdown} onChange={(event) => {setPriceDropdown(event.target.value)}} >
            <option value="">All</option>
            <option value="$">$</option>
            <option value="$$">$$</option>
            <option value="$$$">$$$</option>
          </select>
        </div>
        <div className="search__controls">
          <label htmlFor="veg-dropdown">Filter by vegetarian: </label>
          <select name="veg-dropdown" value={vegDropdown} onChange={(event) => {setVegDropdown(event.target.value)}} >
            <option value="">--</option>
            <option value="No">No</option>
            <option value="Yes">Yes</option>
          </select>
        </div>
        <button className="btn" onClick={handleSearch}><HiSearch /></button>
        <button className="btn" onClick={clearSearch}><MdClear /></button>
      </form>
      <div className="data-result">
        {searchedFood.map((value, key) => {
          return (
            <div key={key}>
              {value.isVegetarian === "yes" 
                ? <p>{value.foodName}{<FaSeedling className="i-veggie" />}</p>
                : <p>{value.foodName}</p>
              }
              <p>{value.priceRange}</p>
            </div>
          )
        })}
      </div>
    </section>
  );
}