How to use slice() in react.js when fetching with react UseEffect

i am trying to figure out how i can use "const currentPosts". I am mapping trough all the fetched objects (pakketjes) and i am showing each of them. But i would like to only show the amount of objects that is stated in the const currentPosts. Here is the code

export default function HomePagina() {
  const paperStyle = { padding: '20px 20px', width: 600, margin: "20px auto", backgroundColor: "#F2D2BD", borderRadius: "35px" };
  const [pakketjes, setPakketjes] = React.useState([]);
  const [currentPage, setCurrentPage] = React.useState(2);
  const [postsPerPage, setpostsPerPage] = React.useState(2)
  const lastPostIndex = currentPage * postsPerPage;
  const firstPostIndex = lastPostIndex - postsPerPage;
  const currentPosts = pakketjes.slice(firstPostIndex, lastPostIndex)

  //useffect = voor bij pagina starten om info te loaden, in dit geval alle pakketjes tonen bij opstart
  React.useEffect(() => {
    fetch("http://localhost:8080/pakketje/getAll")
      .then(res => res.json())
      .then((result) => {
        setPakketjes(result);
      }
      )
  }, []);


 return (
    <>
      <Appbar />
      <br />
      <Container>
        <div>
          <img src={AllePakketjes} width="410" height="350" alt="" style= />
        </div>
        <h1 style=>Alle pakketjes</h1>
        <Paper elevation={3} style={paperStyle}>
          {pakketjes.map(pakketje => (
            <Paper elevation={6} style= key={pakketje.id}>
              <b>Pakketje&emsp;&emsp;&emsp;&emsp;</b>
              <br /><br />
              <b>ID:</b>{pakketje.id}
              <br /><br />
              <b>Status: </b>{pakketje.status}
              <br />
              <b>Code:</b>{pakketje.code}
              <br /><br />
              <Button variant="contained" style= color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
                Delete <DeleteIcon fontSize="small" />
              </Button>&emsp;&emsp;
              <Link to={`/pakketjeUpdaten/${pakketje.id}`}>
                <Button variant="contained" style= color="secondary">
                  Update <ReplayIcon fontSize="small" />
                </Button>
              </Link>&emsp;&emsp;
              <Button variant="contained" style= color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
                Verzenden&emsp;<LocalShippingIcon fontSize="small" />
              </Button>
              <br />
              <br />
            </Paper>
          ))
          }  
        </Paper>
      </Container>
    </>
  );
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/t2hNocl