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

Question

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={{ marginLeft: "365px" }} />
        </div>
        <h1 style={{ textAlign: "center", color: "white" }}>Alle pakketjes</h1>
        <Paper elevation={3} style={paperStyle}>
          {pakketjes.map(pakketje => (
            <Paper elevation={6} style={{ margin: "10px", padding: "15px", textAlign: "left", backgroundColor: "white", borderRadius: "25px" }} 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={{ backgroundColor: "#AE0000" }} color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
                Delete <DeleteIcon fontSize="small" />
              </Button>&emsp;&emsp;
              <Link to={`/pakketjeUpdaten/${pakketje.id}`}>
                <Button variant="contained" style={{ backgroundColor: "Navy" }} color="secondary">
                  Update <ReplayIcon fontSize="small" />
                </Button>
              </Link>&emsp;&emsp;
              <Button variant="contained" style={{ backgroundColor: "black" }} color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
                Verzenden&emsp;<LocalShippingIcon fontSize="small" />
              </Button>
              <br />
              <br />
            </Paper>
          ))
          }  
        </Paper>
      </Container>
    </>
  );
}

You never use currentPosts variable

Konrad
– Konrad

2022-12-16 18:55:14 +00:00
Commented Dec 16, 2022 at 18:55 — Konrad
– Konrad, Commented Dec 16, 2022 at 18:55

Benjamin · Accepted Answer · 2022-12-16 18:59:21Z

1

It looks like you could just replace the pakketjes.map with currentPosts.map.

This will iterate through the subset of pakketjes specified by currentPosts rather than the entire array.

answered Dec 16, 2022 at 18:59

Benjamin

3,6941 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cezar P Over a year ago

I have tried to do it like three times but i have placed the currentPosts in curly braces {}. It works perfectly fine without the curly braces, thank you sir!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related