Я использую response- bootstrap -typeahead для поиска в React. Я столкнулся с проблемой фильтрации вложенного объекта.
const products = [
{
id : 1,
name : "abc",
applications:[
{
name:"ink",
fullname:"INKK"
},
{
name:"solvent",
fullname:"ssINKK"
}
]
},
{
id:2,
name:"xyz",
applications:[
{
name:"ink22",
fullname:"INKK"
},
{
name:"solvent22",
fullname:"ssINKK"
}
]
}
]
Я хочу искать по имени приложения. Например, при поиске ink22 он должен вернуть объект с id: 2 Ниже мой код. Любая помощь будет полезна. Спасибо.
import React from "react";
import Typeahead from "react-bootstrap-typeahead/lib/components/Typeahead";
export default function Search(props){
const { products } = props
return (
<Typeahead
id="search-product"
labelKey={option => `${option.name}`}
minLength={1}
filterBy={(option, props) => {
console.log(props)
}}
options={products ? products : []}
placeholder="Search"
renderMenuItemChildren={(option, props) => (
<div className="card-body">
<img src="/images/default.svg" className="float-left mt-2"/>
<div className="message ml-5">
<h5 className="card-title">{`${option.ci.name} ${option.name}`} </h5>
<h6 className="card-subtitle text-muted">{`${option.brand.name} ${option.range}`}</h6>
</div>
</div>
)}
/>
);
};