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? El objetivo es que pueda buscar los items alfabéticamente y además usar el select para filtrar los items por precio. Pero no funciona agregando los dos como el ejemplo de arriba
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 código 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!
El problema es que solo puedo agregar uno antes del .map ¿Cómo podría agregar los dos para obtener ambas funcionalidades?
Tu pregunta no es del todo clara. Qué significaobtener ambas funcionalidades
?. Por lo que entiendo necesitas iterar ambos arreglos tantoObjectsToShow
comodisplayPage
. Pero para ello hay varias formas de hacerlo. Por lo tanto agrega a tu pregunta un ejemplo de cuál es el resultado esperado de tu componente. Para editar haz click aqui --> editar