"TypeError: Invalid attempt to destructure non-iterable instance"

Issue

I am using ionic react to build an app. I get this error

TypeError: Invalid attempt to destructure non-iterable instance

after running the program https://i.ibb.co/HgkNgyT/error.jpg .
Here is my code

import React, { useEffect, useState } from 'react';
import {
IonContent, IonHeader, IonTitle, IonToolbar, IonApp, IonButton, IonFooter
} from '@ionic/react';
import HomeDatas from '../HomeDatas/HomeDatas';


const Home = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [postPerPage, setPostPerPage] = useState(5);

  const [cafeData, setCafeData] = useState([]);
  useEffect(() => {
  fetch('https://api.github.com/search/code?&per_page=15')
    .then(res => res.json())
    .then(data => setCafeData(data.items))
  }, [])
  console.log(typeof (cafeData));
  const newData = Object.values(cafeData);

  //Get current posts
  const [indexOfLastPost] = currentPage * postPerPage;
  const [indexOfFirstPost] = indexOfLastPost - postPerPage;
  const [currentPosts] = newData.slice(indexOfFirstPost, indexOfLastPost)

  return (
    <IonApp>
    <IonHeader translucent>
    <IonToolbar>
      <IonTitle>App</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent class='ion-justify-content-center'>
    {currentPosts.map(data => <HomeDatas data={data} ></HomeDatas>)}
  </IonContent>
  <IonToolbar>
    <IonFooter>
      <IonButton>Previous</IonButton>
        <IonButton>Next</IonButton>
      </IonFooter>
    </IonToolbar>
  </IonApp>
);
};

export default Home;

Solution

are you sure : currentPage * postPerPage; returns an array? remember you can only destructure an array not an int type

Answered By - Gift Retyu