[React help!]TypeError: cards.slice(...).map is not a function

[Kritik]

import React from 'react';

import Card from './Card';

import { useState } from "react";

import ReactPaginate from "react-paginate";

const Cards = (myCard) => {

const [cards, setCards] = useState(myCard.toString().slice(0, myCard.length));

console.clear();

console.log(cards);

const [pageNumber, setPageNumber] = useState(0);

const cardsPerPage = 4;

const pagesVisited = pageNumber * cardsPerPage;

const displayCard = cards

   .slice(pagesVisited, pagesVisited + cardsPerPage)

   .map((Props) => {

     return (

       <Card 

       cardName = {Props.cardName}

       cardDec = {Props.cardDec}

       imgLink = {Props.imgLink}

       imgAlt = {Props.imgAlt}

       targateMsg = {Props.targateMsg}

       targateLink = {Props.targateLink}

       />

     );

   });

 const pageCount = Math.ceil(myCard.length / cardsPerPage);

 const changePage = ({ selected }) => {

   setPageNumber(selected);

 };

 return (

   <div className="App">

     {displayCard}

     <ReactPaginate

       previousLabel={"Previous"}

       nextLabel={"Next"}

       pageCount={pageCount}

       onPageChange={changePage}

       containerClassName={"paginationBttns"}

       previousLinkClassName={"previousBttn"}

       nextLinkClassName={"nextBttn"}

       disabledClassName={"paginationDisabled"}

       activeClassName={"paginationActive"}

     />

   </div>

 );

}

// return(

//     <>

//     <div>

//     <h1 className="spacer heading-center"><b>{myCard.title}</b></h1>

//     </div>

//     {myCard.data.map(function (Props){

//     return(

//     <Card 

//         cardName = {Props.cardName}

//         cardDec = {Props.cardDec}

//         imgLink = {Props.imgLink}

//         imgAlt = {Props.imgAlt}

//         targateMsg = {Props.targateMsg}

//         targateLink = {Props.targateLink}

//         />

//         )})}

// </>)

// }

export default Cards

I can’t find what’s wrong, or is there any better way to get pagination

[jsdisco]

After this line:

const [cards, setCards] = useState(myCard.toString().slice(0, myCard.length));

your cards variable isn’t an array anymore because you convert it to a String (any particular reason for that?).

Since .map is an array method, the following can only fail:

const displayCard = cards

   .slice(pagesVisited, pagesVisited + cardsPerPage)

   .map(...)

[Kritik]

If i remove that, then i am getting this error.

[lasjorg]

What exactly is myCard?

If it’s a prop being passed to the component you need to access it on the props property or use destructuring.

[Kritik]

kritik-sah/react-portfolio

[Kritik]

myCard is a functional parameter, here myCard holds value of CertData (in about.js component)
which is

import Fccrespweb from "../img/cert/fccweb.PNG";
const CertData = [
    {
      cardName : "Responsive Web Designing",
      cardDec : "This certifies that i Sah kritik has successfully completed the freeCodeCamp.org Responsive Web Design Developer Certification, representing approximately 300 hours of coursework.",
      imgLink : Fccrespweb,
      imgAlt : "Responsive Web Design",
      targateMsg : "Issued March 23, 2021",
      targateLink : "https://www.freecodecamp.org/certification/kritiksah/responsive-web-design",
    },
];

export default CertData;

[lasjorg]

The Cards component is being passed the props title and data. You need to access the props.

<Cards title={"CERTIFICATIONS"} data={CertData}/>

const Cards = ({ title, data }) => {
 // use title and data
}

Or

const Cards = (props) => {
// use props.title and props.data
}

---

BTW, you do not need brackets for the prop if all you are passing in is a string.

[Kritik]

thanks, I understood