Как я могу реализовать фильтр по двум параметрам в реакции

Question

Можно ли как-нибудь сделать фильтр по имени и описанию одновременно? Я могу реализовать фильтр по имени или по описанию, но не понимаю, как это сделать одновременно.

    render() {
        let filteredProducts = this.props.productList.filter(
            (value)=>{
                return value.description.indexOf(this.state.value) !== -1;
            }
        );
        return (
            <div className="product">
            <input type="text" name="find" value={this.state.value} onChange={this.handleChange}/>
                <div className="wrapper">
                    {filteredProducts.map((value,index)=>{
                        return(
                            <div className="product__card" key={index}>
                                <div className="product__card-info">
                                    <h1>{value.name}</h1>
                                    <span>{value.price}</span>
                                </div>
                                <p>{value.description}</p>
                                <DeleteProduct 
                                    onDelete={this.props.onDelete}
                                    productId={value.id}
                                />
                            </div>
                        )
                    })}
                </div>
            </div>
        );
    }
}

Массив, который я отображаю и фильтрую, выглядит следующим образом

productList:[
    {
       name: "Test",
       description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis exercitationem perferendis debitis dolores neque hic nam eveniet aliquid sit, obcaecati unde accusantium dolorem adipisci expedita voluptas dolor laborum ex optio!",
       price: 100
    }
]

Спасибо за помощь.

Answer 1

Почему вы не используете Array.prototype.find () с логическими операторами?

Как:

let filteredList = this.props.productList.find( n => n.name === this.state.x && n.description === this.state.y)

Если это "this.state.value" указывает на объекты productList "цена" затем измените n.description или n.name, например:

... n.price === this.state.value

Answer 2

(Обратите внимание, что приведенные ниже примеры не определяют поведение, когда ничего не выбрано для имени / описания.)

[Обновлено, чтобы включать изменения, основанные на комментариях Джона Рудделса. Хороший улов.]

Попробуйте, если хотите показать строки, соответствующие как , так и описанию.

const filteredProducts = this.props.productList.filter(value => 
  value.description.indexOf(this.state.value) !== -1
  && value.name.indexOf(this.state.name) !== -1);    

Или это, если хотите показать строки, соответствующие названию или этого описания.

const filteredProducts = this.props.productList.filter(value => 
  value.description.indexOf(this.state.value) !== -1
  || value.name.indexOf(this.state.name) !== -1);