Estoy intentando tener un input para búsqueda y un select para filtrar.
Tengo dos consts distintos el ObjectsToShow y el displayPage que pueden ver abajo.
El problema es que solo puedo agregar uno antes del .map
¿Cómo podría agregar los dos para obtener ambas funcionalidades?
Esto es lo que he intentando pero solo funciona el ObjectstoShow no el displayPage
{displayPage.map && objectsToShow.map((item) => (
<Col lg="3" md="4" sm="6" xs="6" key={item.id} className="mb-4">
<ProductCard item={item}/>
</Col>
))}
Este es el codigo completo
const AllFoods = () => {
//***************INPUT SEARCH *************/
const [searchTerm, setSearchTerm] = useState("");
const searchedProduct = products.filter((item) => {
if (searchTerm.value === "") {
return item;
}
if (item.title.toLowerCase().includes(searchTerm.toLowerCase())) {
return item;
} else {
return console.log("not found");
}
});
//*********************Selector Filtering************/
const [objectsToShow, setToShow] = React.useState(products)
const compare = (a, b, ascendingOrder) => {
if (a < b) {
return ascendingOrder ? -1 : 1;
}
if (a > b) {
return ascendingOrder ? 1 : -1;
}
return 0;
}
const handleChange = (value) => {
if(value == 'none'){
setToShow([...products])
} else {
let toType, toAscending
switch(value){
case 'ascending' : toType = true; toAscending = true; break;
case 'descending' : toType = true; toAscending = false; break;
case 'high' : toType = false; toAscending = true; break;
case 'low' : toType = false; toAscending = false; break;
}
let current = [...products]
current.sort((a, b) => toType ?
compare(a.name, b.name, toAscending)
:
compare(a.price, b.price, toAscending))
setToShow([...current])
}
}
//***************PAGINATION *************/
const [pageNumber, setPageNumber] = useState(0);
const productPerPage = 12;
const visitedPage = pageNumber * productPerPage;
const displayPage = searchedProduct.slice(
visitedPage,
visitedPage + productPerPage
);
const pageCount = Math.ceil(searchedProduct.length / productPerPage);
const changePage = ({ selected }) => {
setPageNumber(selected);
};
return (
<Helmet title="All-Foods">
<CommonSection title="All Foods" />
<section>
<Container>
<Row>
<Col lg="6" md="6" sm="6" xs="12">
<div className="search__widget d-flex align-items-center justify-content-between ">
<input
type="text"
placeholder="I'm looking for...."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<span>
<i class="ri-search-line"></i>
</span>
</div>
</Col>
<Col lg="6" md="6" sm="6" xs="12" className="mb-5">
<div className="sorting__widget text-end">
<select className="w-50" onChange={(e)=>handleChange(e.target.value)}>
<option value="none">Default</option>
<option value="high">Low Price</option>
<option value="low">High Price</option>
</select>
</div>
</Col>
{displayPage.map && objectsToShow.map((item) => (
<Col lg="3" md="4" sm="6" xs="6" key={item.id} className="mb-4">
<ProductCard item={item}/>
</Col>
))}
Muchas gracias!