как сделать так, чтобы поле поиска для массива объектов реагировало с учетом регистра и без пробелов

Question

У меня есть этот массив объектов в моем состоянии

this.state = {
            data: {
                products: [
                    {
                        name: 'Iphone',
                        image: '/logo/Apple-Logo.jpg',
                        price: 1000
                    },
                    {
                        name: 'Google',
                        image: '/logo/Apple-Logo.jpg',
                        price: 700
                    },
                    {
                        name: 'Samsung',
                        image: '/logo/Apple-Logo.jpg',
                        price: 1700
                    },
                    {
                        name: 'Sony ',
                        image: '/logo/Apple-Logo.jpg',
                        price: 300
                    },
                ],         
        };

, и я хочу иметь возможность поиска в нем с учетом регистра и без пробелов.

Так что я хочу иметь что-то вроде это будет принимать параметр свойство и searchValue

function searchProduct(property, searchValue) {
  ...
  return newProduct;
}

Так что я смогу назвать его так

let newGoogleProduct = searchProduct('name', 'Google');

Который даст мне весь товар с именем Google

Answer 1

вы можете сделать это, используя фильтр и indexof

в вашем штате просто добавьте переменную для обработки результатов поиска

this.state = {
        searchResults: null
        data: {
            products: [
                {
                    name: 'Iphone',
                    image: '/logo/Apple-Logo.jpg',
                    price: 1000
                },
               .
               .
               .
               .
            ],         
    };

затем добавьте обработчик события

searchProduct = (e) => {
if (!e.target.value) {
    this.setState({
        searchResults: null
    });
    return
}
let results = this.state.data.products.filter(product =>
    product.name.toLowerCase().trim().indexOf(e.target.value.toLowerCase().trim()) !== -1);
this.setState({
    searchResults: results
})

};

и добавьте эту строку в рендер

 let products = this.state.searchResults ? this.state.searchResults :this.state.data.products;

наконец добавьте этот код в ваш jsx

 <p> search box </p>
 <input type='text' onChange={this.searchProduct}/>
 {products ? products.map(product => (
    <div key={product.name}>
         <img src={product.image}/>
          <p> {product.name} </p>
    </div>
         ))
    : ""
  }