Problem with this error "TypeError: Cannot read property 'map' of undefined"

Question

TypeError: Cannot read property 'map' of undefined

This error keeps coming up and will not let me run my website. Any help or assistance would be great. I just need to figure out what exactly to change in order to get this running.

    import React from "react";
    import styled from "styled-components";
    import { AppContext } from "../App/AppProvider";
    import PriceTile from "./PriceTile";

    export default function() {
      return (
        <AppContext.Consumer>
          {({ prices }) => (
            <PriceGrid>
              {prices.map((price, index) => (
                <PriceTile key={`priceTile-${index}`} index={index} price={price} />
              ))}
            </PriceGrid>
          )}
        </AppContext.Consumer>
      );
    }

Please show your AppContext.Provider

Vencovsky
– Vencovsky

2019-07-31 17:50:36 +00:00
Commented Jul 31, 2019 at 17:50 — Vencovsky
– Vencovsky, Commented Jul 31, 2019 at 17:50

felixmosh · Accepted Answer · 2019-07-31 16:56:05Z

1

Probably you are not providing an initial value to your Context,

Check in ../App/AppProvider there is some call to React.createContext, check that you provide an object with prices that is an empty array.

answered Jul 31, 2019 at 16:56

felixmosh

35.9k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jzepedaa Over a year ago

Where would i add that tho?

felixmosh Over a year ago

as i wrote, check ../App/AppProvider file.

Steve Holgado · Accepted Answer · 2019-07-31 18:07:12Z

You can check for the existence of prices before doing the map:

<AppContext.Consumer>
  {({ prices }) => (
    <PriceGrid>
      {prices && prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

...or you could default prices to an empty array:

<AppContext.Consumer>
  {({ prices = [] }) => (
    <PriceGrid>
      {prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

...or, better still, do both:

<AppContext.Consumer>
  {({ prices = [] }) => (
    <PriceGrid>
      {prices && prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

Collectives™ on Stack Overflow

Problem with this error "TypeError: Cannot read property 'map' of undefined"

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related