InfiniteScrollCards.js

import React, { useState, useEffect } from "react";
import Cards from "./Cards";

export default function InfiniteScrollCards({ data, type = "LearningObject"}) {
    return (
        <div className="flex flex-wrap justify-center">
            {type === "LearningObject" ?
                data.map((item, index) => (
                    <Cards
                        id={item['id']}
                        key={item['id']}
                        title={item["name"]}
                        author={item["publisher"]["name"]}
                        avatar={item["publisher"]["avatar"]}
                        image={item["thumbnail"]}
                        type={item["object_type"]}
                    />
                ))
                :

                data.map((item, index) => (
                    <Cards
                        key={item['id']}
                        title={item["name"]}
                        author={item["owner"]["name"]}
                        avatar={item["owner"]["avatar"]}
                        image={item["items_thumbnails"]}
                    />))
            }
        </div>
    )
};