Skip to main content
1 de 3

Agregar dos const a .map en React.js

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!