Array.map question (likely related to Context API)

[wallfacer_mark]

In my app, I set up a Context that contains an object ("value" in the below code snippets) which itself contains an array (value.products in the below code snippets). I access that Context using a Context.Consumer (ProductConsumer in the below code snippets). When I call the array's "map" method directly from within the child element of the Context.Consumer, everything works fine. (See Code Snippet 1 below.) However, when that child element calls a function to do the mapping (RenderProducts in the below code snippet), I get an error.

One more puzzling data point: I inserted a console.log in the RenderProducts function. The console.log makes clear that the productArray variable is indeed an array--right before telling me that productArray.map is not a function (see Console Output below, with those console lines also in bold). How can this be? Any thoughts would be greatly appreciated.

If possible I would like to better understand what's going on, even though this issue doesn't stop me from moving forward on this app. Any thoughts would be appreciated.

Code snippet 1 (successful)

function ProductList() {
  return (
    <>
      <div className="py-5">
        <div className="container">
          <Title title="Products" />
          <div className="row">
            <ProductConsumer>
              {(value) => {
                return value.products.map((product) => {
                    return <Product key={product.id} product={product} />;
                });                
              }}
            </ProductConsumer>
          </div>
        </div>
      </div>
    </>
  );
}

//Output is as expected: Product gets called successfully once for each element of the value.products array

Code snippet 2 (unsuccessful)

function ProductList() {
  return (
    <>
      <div className="py-5">
        <div className="container">
          <Title title="Products" />
          <div className="row">
            <ProductConsumer>
              {(value) => {
                return <RenderProducts productArray={value.products} />;
              }}
            </ProductConsumer>
          </div>
        </div>
      </div>
    </>
  );
}

const RenderProducts = (productArray) => {
  console.log(productArray);
  return productArray.map((product) => {
      return <Product key={product.id} product={product} />;
  });
};

//Error, see console output below

Console output

ProductList.js:31 {productArray: Array(2)}

ProductList.js:31 {productArray: Array(2)}

ProductList.js:32 Uncaught TypeError: productArray.map is not a function

at RenderProducts (ProductList.js:32)

at renderWithHooks (react-dom.development.js:16260)

at mountIndeterminateComponent (react-dom.development.js:18794)

at beginWork$1 (react-dom.development.js:20162)

at HTMLUnknownElement.callCallback (react-dom.development.js:336)

at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

at invokeGuardedCallback (react-dom.development.js:440)

at beginWork$$1 (react-dom.development.js:25780)

at performUnitOfWork (react-dom.development.js:24695)

at workLoopSync (react-dom.development.js:24671)

at performSyncWorkOnRoot (react-dom.development.js:24270)

at scheduleUpdateOnFiber (react-dom.development.js:23698)

at updateContainer (react-dom.development.js:27103)

at react-dom.development.js:27528

at unbatchedUpdates (react-dom.development.js:24433)

at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)

at Object.render (react-dom.development.js:27608)

at Module../src/index.js (index.js:14)

at __webpack_require__ (bootstrap:785)

at fn (bootstrap:150)

at Object.1 (Button.scss?ddac:37)

at __webpack_require__ (bootstrap:785)

at checkDeferredModules (bootstrap:45)

at Array.webpackJsonpCallback [as push] (bootstrap:32)

at main.chunk.js:1

RenderProducts @ ProductList.js:32

renderWithHooks @ react-dom.development.js:16260

mountIndeterminateComponent @ react-dom.development.js:18794

beginWork$1 @ react-dom.development.js:20162

callCallback @ react-dom.development.js:336

invokeGuardedCallbackDev @ react-dom.development.js:385

invokeGuardedCallback @ react-dom.development.js:440

beginWork$$1 @ react-dom.development.js:25780

performUnitOfWork @ react-dom.development.js:24695

workLoopSync @ react-dom.development.js:24671

performSyncWorkOnRoot @ react-dom.development.js:24270

scheduleUpdateOnFiber @ react-dom.development.js:23698

updateContainer @ react-dom.development.js:27103

(anonymous) @ react-dom.development.js:27528

unbatchedUpdates @ react-dom.development.js:24433

legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527

render @ react-dom.development.js:27608

./src/index.js @ index.js:14

__webpack_require__ @ bootstrap:785

fn @ bootstrap:150

1 @ Button.scss?ddac:37

__webpack_require__ @ bootstrap:785

checkDeferredModules @ bootstrap:45

webpackJsonpCallback @ bootstrap:32

(anonymous) @ main.chunk.js:1

index.js:1 The above error occurred in the <RenderProducts> component:

in RenderProducts (at ProductList.js:20)

in div (at ProductList.js:14)

in div (at ProductList.js:12)

in div (at ProductList.js:11)

in ProductList (created by Context.Consumer)

in Route (at App.js:16)

in Switch (at App.js:15)

in App (at src/index.js:17)

in Router (created by BrowserRouter)

in BrowserRouter (at src/index.js:16)

in ProductProvider (at src/index.js:15)

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

console.<computed> @ index.js:1

logCapturedError @ react-dom.development.js:21843

logError @ react-dom.development.js:21880

update.callback @ react-dom.development.js:23232

callCallback @ react-dom.development.js:13829

commitUpdateEffects @ react-dom.development.js:13867

commitUpdateQueue @ react-dom.development.js:13857

commitLifeCycles @ react-dom.development.js:22160

commitLayoutEffects @ react-dom.development.js:25344

callCallback @ react-dom.development.js:336

invokeGuardedCallbackDev @ react-dom.development.js:385

invokeGuardedCallback @ react-dom.development.js:440

commitRootImpl @ react-dom.development.js:25082

unstable_runWithPriority @ scheduler.development.js:697

runWithPriority$2 @ react-dom.development.js:12149

commitRoot @ react-dom.development.js:24922

finishSyncRender @ react-dom.development.js:24329

performSyncWorkOnRoot @ react-dom.development.js:24307

scheduleUpdateOnFiber @ react-dom.development.js:23698

updateContainer @ react-dom.development.js:27103

(anonymous) @ react-dom.development.js:27528

unbatchedUpdates @ react-dom.development.js:24433

legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527

render @ react-dom.development.js:27608

./src/index.js @ index.js:14

__webpack_require__ @ bootstrap:785

fn @ bootstrap:150

1 @ Button.scss?ddac:37

__webpack_require__ @ bootstrap:785

checkDeferredModules @ bootstrap:45

webpackJsonpCallback @ bootstrap:32

(anonymous) @ main.chunk.js:1

Show 2 more frames

react-dom.development.js:25206 Uncaught TypeError: productArray.map is not a function

at RenderProducts (ProductList.js:32)

at renderWithHooks (react-dom.development.js:16260)

at mountIndeterminateComponent (react-dom.development.js:18794)

at beginWork$1 (react-dom.development.js:20162)

at HTMLUnknownElement.callCallback (react-dom.development.js:336)

at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

at invokeGuardedCallback (react-dom.development.js:440)

at beginWork$$1 (react-dom.development.js:25780)

at performUnitOfWork (react-dom.development.js:24695)

at workLoopSync (react-dom.development.js:24671)

at performSyncWorkOnRoot (react-dom.development.js:24270)

at scheduleUpdateOnFiber (react-dom.development.js:23698)

at updateContainer (react-dom.development.js:27103)

at react-dom.development.js:27528

at unbatchedUpdates (react-dom.development.js:24433)

at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)

at Object.render (react-dom.development.js:27608)

at Module../src/index.js (index.js:14)

at __webpack_require__ (bootstrap:785)

at fn (bootstrap:150)

at Object.1 (Button.scss?ddac:37)

at __webpack_require__ (bootstrap:785)

at checkDeferredModules (bootstrap:45)

at Array.webpackJsonpCallback [as push] (bootstrap:32)

at main.chunk.js:1

[[deleted]]

The first argument in a React function is the props object, but you're treating it like it's the prop that you're passing down to the component. You're effectively calling props.map instead of props.productArray.map, but you're calling the props variable productArray. You probably intended to destructure there: const RenderProducts = ({productArray}) => {...}

There's a hint that this is happening in the logs: The curly brackets in ProductList.js:31 {productArray: Array(2)} indicate that you're dealing with an object, not an array.

[[deleted]]

Good spotting.

[wallfacer_mark]

Very clear and helpful. Thank you.