image

Bootcamps ilimitados + curso de inglês para sempre

80
%OFF

FP

Felipe Pereira23/12/2023 19:56
Compartilhe
Microsoft 50 Anos - Prompts InteligentesRecomendados para vocêMicrosoft 50 Anos - Prompts Inteligentes

Botão Carregar mais com React js

  • #React

Estou criando um site e gostaria de colocar paginação com um botão de carregar mais. Estou usando um map para renderizar os itens, mas está dando um erro. Está carregando mais itens do que deveria. Gostaria de saber como eu poderia fazer isso de outra forma e no que estou errando.

import { useState } from "react";
import Produto from "../Components/Produto";
import './ListaProdutos.css';
import { blusas, calcas, camisas, jaquetas, saias, shorts, vestidos } from "./ListaTodosProdutos";


const ListaProdutosHome = () => {


  let listaHome = [];
  let newListaHome = [];


  listaHome = blusas.concat(saias, calcas, blusas, camisas, shorts, vestidos, jaquetas);
  listaHome.sort(function(){return 0.5 - Math.random()});


  
  let [maisItens, setMaisItens] = useState(8);
  const carregarMais = () => {
      setMaisItens(maisItens + 8);
      console.log(maisItens);
  }


  newListaHome = listaHome.slice(0, maisItens);
  
  return (
      <div className="listaDeProdutos">
          <p className="quantidadeItens">{maisItens} itens</p>
          <div className="conteinerProduto">
              {newListaHome.length > 0 && newListaHome.map((value) => <Produto className="caixaProduto" key={value.id} path={value.caminho} nome={value.nome} preco={value.preco} />)}      
          </div> 
          <button id="carregarMais" onClick={carregarMais}>Carregar Mais</button>
      </div>  
  );
};


export default ListaProdutosHome;
Compartilhe
Recomendados para você
WEX - End to End Engineering
Microsoft 50 Anos - Prompts Inteligentes
Microsoft 50 Anos - GitHub Copilot
Comentários (0)
Recomendados para vocêMicrosoft 50 Anos - Prompts Inteligentes