0

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!

2
  • 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é significa obtener ambas funcionalidades?. Por lo que entiendo necesitas iterar ambos arreglos tanto ObjectsToShow como displayPage. 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 Commented el 20 jul. 2022 a las 20:39
  • Te recomiendo que hagas el recorrido de bienvenida y leas Cómo preguntar. Tambien puedes leer ejemplo mínimo verificable para obtener mas información. Commented el 20 jul. 2022 a las 20:40

1 respuesta 1

0

No he entendido mucho que es lo que quieres hacer, por lo que entendí es que quieres que te muestre los dos arreglos, lo puedes hacer uno después del otro por separado

Lo que quedaría algo así:

{
    displayPage.map(item => {
        <Col lg="3" md="4" sm="6" xs="6" key={item.id} className="mb-4">
            <ProductCard item={item}/>
        </Col>
      }
}

{  
  objectToShow.map(item => {
        <Col lg="3" md="4" sm="6" xs="6" key={item.id} className="mb-4">
            <ProductCard item={item}/>
        </Col>
    })
    
}

Es mas o menos lo que he podido entender, dígame si me equivoco.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.