Как реализовать фильтрацию товаров по цене, когда данные приходят из базы данных и в фалйла уже присутствует фильтрация

AppFilter.js Файл где находятся кнопки для фильтрации товаров

import React from 'react';
import './Filter.css';
import data from "../service/data";



const AppFilter = (props) => {
    const buttonsData = [
        {name: 'all', label: 'All cocktails'},
     
        {name: 'moreThen1000', label: 'More expensive than 500$'}
    ];

    const buttons = buttonsData.map(({name, label}) => {
        const active = props.filter === name;
        const clazz = active ? 'btn-light' : 'btn-outline-light';
        return (
            <button type="button"
                    className={`btn ${clazz}`}
                    key={name}
                    onClick={() => props.onFilterSelect(name)}>
                    {label}
            </button>
        )
    })
   
    


    return (
        <div className="btn-group">
            {buttons}
        </div>
    )
}

export default AppFilter;

data.js файл где хранятся товары

 const data = {

        drinks: [
          {
            "strDrink": "Margarita'",
            "price": 800,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/5noda61589575158.jpg",
            "id": 1
           
          },
          {
            "strDrink": "Blue Margarita",
            "price": 900,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/bry4qh1582751040.jpg",
            "id": 2
          },
          {
            "strDrink": "Tommys Margarita",
            "price": 1000,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/loezxn1504373874.jpg",
            "id": 3
          },
          {
            "strDrink": "Whitecap Margarita",
            "price": 700,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/srpxxp1441209622.jpg",
            "id": 4
          },
          {
            "strDrink": "Strawberry Margarita",
            "price": 750,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/tqyrpw1439905311.jpg",
            "id": 5
          },
          {
            "strDrink": "Smashed Watermelon Margarita",
            "price": 850,
            "strDrinkThumb": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/dztcv51598717861.jpg",
            "id": 6
          },
          {
            "strDrink": "Whiskey",
            "price": 1050,
            "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/hbkfsh1589574990.jpg",
            "id": 7
          },
          {
            "strDrink": "Negroni",
            "price": 1100,
            "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/qgdu971561574065.jpg",
            "id": 8
          },
          {
            "strDrink": "Mojito",
            "price": 500,
            "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/metwgh1606770327.jpg",
            "id": 8
          },
          {
            "strDrink": "Daiquiri",
            "price": 900,
            "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/mrz9091589574515.jpg",
            "id": 8
          }
        ],
        term:'',
        filter:'all',
        price:''
    
        
    
}
export default data; 

ListProduct.js файл где выводятся карточки с товарами

import "./ListProduct.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col, Card } from "react-bootstrap";

  export const ListProduct = (props) => {
  const {searchTerm} = props
  const element = searchTerm.map((item, i) => {
    const { strDrinkThumb, strDrink, price } = item;
    return (
      
      <div className="card">
        <li key={i}>
          <Container>
            <Row>
              <Col>
                <Card  style={{ width: "18rem" }}>
                  <Card.Img variant="top" src={strDrinkThumb} />
                  <Card.Body>
                    <Card.Title>{strDrink}</Card.Title>
                    <Card.Text>
                     { `Alcohol shop . The price is for one glass
                      ${price}$`}
                    </Card.Text>
                  </Card.Body>
                </Card>
              </Col>
            </Row>
          </Container>
        </li>
        
      </div>
    );
  });

  return <div  className="site">
  <ul>{ element}</ul>
  <div>
<footer className="page-footer font-small blue pt-4">
    <div className="container-fluid text-center text-md-left">
        <div className="row">
            <div className="col-md-6 mt-md-0 mt-3">
                <h5 className="text-uppercase">Cocktail shop</h5>
                <p>Modern cocktail shop for different choices</p>
            </div>

            <hr className="clearfix w-100 d-md-none pb-0"/>

            <div className="col-md-3 mb-md-0 mb-3">
                <h5 className="text-uppercase">Our online resources</h5>
                <ul className="list-unstyled">
                    <li><a href="https://www.instagram.com/cocktail_sol/">Our instagram page</a></li>
                    <li><a href="http://localhost:3000/">Our site</a></li>
                  
                </ul>
            </div>

            
           
        </div>
    </div>

    <div className="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
    </div>

</footer>
</div>
  </div>;
};

App.js главный файл программы

import Navbar from './components/Navsbar'
import {useState} from "react"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import {ListProduct} from "./ListProduct";
import data from "./service/data";
import {Home} from './Home'
import AppFilter from './components/Filter';

//import Footer from 'rc-table/lib/Footer';


function App() {

  const [filter, setFilter,setState] = useState("");
  const [info, setInfo] = useState(data)
  //const [filter,setState] = useState("");
  

  
  const searchTerm = (items, term,number) => {
    let lower = term.toLowerCase();
    if (term.length === 0) return items;
    return items.filter((item) => {
      let itemLower = item.strDrink.toLowerCase()
        return itemLower.indexOf(lower)> -1;
      });
    
  };

  const onUpdateSearch = (term) => {
    setFilter(term);
  };

 const filterPost =(items,filter)=>{
    switch(filter){
        case 'rise':
        return items.filter(item=>item.rise);
        case 'moreThen1000':
            return items.filter(item=>item.salary > 500);
            default:
                return items
    }
}
 const onFilterSelect =(filter) =>{
  this.setState(filter);
};

  const visible = searchTerm(info.drinks, filter)

  return (
    <>
     
    <Router>
    <Navbar onUpdateSearch={onUpdateSearch} />
    <AppFilter filter={filter} onFilterSelect={onFilterSelect}/>
    
    <Routes>
    
    <Route exact path='/' element={<Home />} />
    <Route exact path="/ListProduct" element={<ListProduct searchTerm = {visible} />} />
 
    
    </Routes>
   
    </Router>
 
  
    </>
  );
}



export default App;