TypeError: .map is not a function (React js)

Am a newbie in react, so pardon me if am unable to fully explain the problem am facing, but after google searching, I came to understand that the object am trying to map is not an array(which am not sure is the case this time around because, all the examples I see online is the same and I take my time for the past 4weeks to diligently follow up the examples I see online but I cant just figure my react app to work



(this is the react component script, located in the component folder), I have this

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as catalogActions from "../../actions/catalog";

import ProductImage from "./ProductImage";
import ProductThumbs from "./ProductThumbs";

export class CatalogComponent extends Component {
  componentDidMount() {
  render() {
    const { catalogs, selectProduct, selectedProduct } = this.props;
    return (
      //let { catalogs } = this.props;
        <h1>Catalog Field</h1>
        <div className="image-gallery" hidden={!selectedProduct}>
          <ProductImage product={selectedProduct} />
          <ProductThumbs selectProduct={selectProduct} catalogs={catalogs} />

export default connect(
  state => ({
    catalogs: state.catalogs,
    selectedProduct: state.selectedProduct
  dispatch => bindActionCreators(catalogActions, dispatch)

And in


I have this

import React from “react”;

export default function ProductImage({ product }) {
  return (
    <div className="gallery-image">
      <div>{product ? <img src={product} alt={"gbenga"} /> : null}</div>



has this

import React from "react";

export default function ProductThumbs({ catalogs, selectProduct }) {
  return (
    <div className="image-scroller">
      {catalogs.map((product, index) => (
        <div key={index} onClick={selectProduct.bind(this, product)}>
          <img src={product} alt={"gbenga now"} />

The problem is in this script as it says

catalogs.map is not a function

this is what is in the reducer

import { CATALOGS_RECEIVED } from "../constants/catalog";
import { SELECT_PRODUCT } from "../constants/catalog";

export default function catalogs(state = { catalogs: [] }, action) {
  switch (action.type) {
      return { ...state, catalogs: action.catalogs };
      return { ...state, selectedProduct: action.product };
      return state;

Just at a quick glance… try this.
const returnedArray = Array.from(caralogs)
And then map the new const, there ways to optimize but I’d try starting there.