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

In

catalog.js

(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() {
    this.props.fetchCatalog();
  }
  render() {
    const { catalogs, selectProduct, selectedProduct } = this.props;
    return (
      //let { catalogs } = this.props;
      <div>
        <h1>Catalog Field</h1>
        <div className="image-gallery" hidden={!selectedProduct}>
          <ProductImage product={selectedProduct} />
          <ProductThumbs selectProduct={selectProduct} catalogs={catalogs} />
        </div>
      </div>
    );
  }
}

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

And in

productImage.js

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>
    </div>
  );
}

And

productThumbs.js

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"} />
        </div>
      ))}
    </div>
  );
}

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) {
    case CATALOGS_RECEIVED:
      console.log(JSON.stringify(action.catalogs));
      return { ...state, catalogs: action.catalogs };
    case SELECT_PRODUCT:
      return { ...state, selectedProduct: action.product };
    default:
      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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.